模态对话框/省市二级联动/左右移动

最新推荐文章于 2020-04-24 17:16:30 发布

July-Mao

最新推荐文章于 2020-04-24 17:16:30 发布

阅读量352

点赞数

分类专栏： css 文章标签： css实例

本文链接：https://blog.csdn.net/mf_happying/article/details/79129330

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.模态对话框-css实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    *{
        margin: 0px;
    }
    #div1{
        height: 2000px;
        background-color: aqua;
        position: fixed;
        /*用了fixed必须写width:100%*/
        width: 100%;
        top:0;
        left:0;
        z-index: 1000;

    }
    #div2{
        position: fixed;
        width: 100%;
        top:0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rebeccapurple;
        opacity: 0.3;


    }
    #div3{
        height: 200px;
        width: 200px;
        background-color: aquamarine;
        position: absolute;
        top:50%;
        left: 50%;
        z-index:1003;
        /*z-index 属性设置元素的堆叠顺序。Z-index 仅能在定位元素上奏效（例如 position:absolute;）
        ！Z-index 可用于将在一个元素放置于另一元素之后。*/
        margin-left: -100px;
        margin-top: -100px;
    }
    .hide{
        display: none;
    }
</style>
</head>
<body>
    <div id="div1">
        <input type="button" value="click" onclick="show()">
    </div>
    <div id="div2" class="hide"></div>
    <div id="div3" class="hide">
        <input type="button" value="cancel" onclick="cancel()">
    </div>

</body>
</html>
<script>
    function show() {
        var ele=document.getElementsByClassName("hide")
        for (var i=0;i<ele.length;i++){
            ele[i].classList.remove("hide");
        }

    }
    function cancel() {
        var ele=document.getElementsByClassName("hide")
        for(var i=0;i<ele.length;i++){
            ele[i].classList.add("hide")
        }

    }
</script>

二.省市二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select id="province" onchange="func1(this)">
    </select>
    <select id="city">
    </select>
</body>
</html>
<script>
    data={"河北":["邯郸","廊坊"],"北京":["海淀","朝阳"],"江苏":["南京","扬州"]}
    var province=document.getElementById("province")
    var city=document.getElementById("city")
    // 给province这个 <select>添加<option>标签，在标签里面添加省份
    for(var i in data){
        var option_pro=document.createElement("option")
        option_pro.innerHTML=i
        province.appendChild(option_pro)
    }
    //触发province的时候，点击就会出现相应的城市名
    // self.selectedIndex表示选中标签的索引
    // self.options是<select>标签的属性
    function func1(self) {
        var choice=(self.options[self.selectedIndex]).innerHTML
        //方法一
        // var options=city.children
        // for(var k=0; k<options.length;k++){
        //     city.removeChild(options[k])
        //     k--
        // }
        //方法二
        city.options.length=0
        //city.options.length=0表示将city列表中的内容都清空
        for(var i in data[choice]){
            var option_city=document.createElement("option")
            option_city.innerHTML=data[choice][i]
            city.appendChild(option_city)
    }
    }

</script>

三.左右移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #box-l,#choice,#box_r{
        display: inline-block;
    }

</style>
<body>
    <div id="box-l">
        <select id="left" multiple size="10">
            <option>选一</option>
            <option>选二</option>
            <option>选三</option>
            <option>选四</option>
            <option>选五</option>
            <option>选六</option>
        </select>
    </div>
    <div id="choice">
        <input type="button" value="------>" onclick="add()"><br>
        <input type="button" value="======>" onclick="addall()"><br>
        <input type="button" value="<------" ><br>
        <input type="button" value="<=======" ><br>
    </div>
    <div id="box_r">
        <select multiple size="10" id="right">
            <option>选七</option>
        </select>
    </div>
<script>
    var right=document.getElementById("right")
    var left=document.getElementById("left")
    function add() {
        var options=left.children;
        for(var i=0;i<options.length;i++){
            if(options[i].selected==true){
                // options[i].selected=false
                right.appendChild(options[i])
                // i--
            }
        }

    }
</script>
</body>
</html>