JavaScript小程序_简单的javascript小程序-优快云博客

本文链接：https://blog.youkuaiyun.com/sunshine_hl/article/details/47733931

一、选择省、市

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
省：<select οnchange="change()"></select>
市：<select></select>

</body>
<script type="text/javascript">
    var firstselectEle = document.getElementsByTagName("select")[0];
    var secondselectEle = document.getElementsByTagName("select")[1];
    var provinceArr = new Array();
    provinceArr["四川"] = ["成都","德阳","绵阳"];
    provinceArr["北京"] = ["朝阳区","城西区","海淀区"];

    function init(){
        for(var identity in provinceArr){
            var textEle = document.createTextNode(identity);
            var optionEle = document.createElement("option");
            optionEle.appendChild(textEle);
            firstselectEle.appendChild(optionEle);
        }
        var len = provinceArr["四川"].length;
        for(var i = 0; i < len; i++){
            var textEle = document.createTextNode(provinceArr["四川"][i]);
            var optionEle = document.createElement("option");
            optionEle.appendChild(textEle);
            secondselectEle.appendChild(optionEle);
        }
    }
    function change(){
        secondselectEle.length = 0;
        for(var identity in provinceArr){
            if(firstselectEle.options[firstselectEle.selectedIndex].text ===  identity){
                var len = provinceArr[identity].length;
                for(var i = 0; i<len; i++){
                    var textEle = document.createTextNode(provinceArr[identity][i]);
                    var optionEle = document.createElement("option");
                    optionEle.appendChild(textEle);
                    secondselectEle.appendChild(optionEle);
                }
            }
        }
    }
    init();
</script>
</html>

二、一个一个的内容依次到右边框框，全部内容一起一次性到右边框框

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .a{
            float: left;
        }
        .b{
            float: left;
            width: 42px;
            margin-left: 15px;
            margin-right: 15px;
        }
        select{
            width: 90px;
        }
    </style>
</head>
<body>
    <div class="a">
        <select id="left" size="8">
            <option>张三</option>
            <option>李四</option>
            <option>王二</option>
            <option>麻子</option>
        </select>
    </div>

    <div class="b">
        <input type="button" value=">" οnclick="addone()">
        <input type="button" value=">>" οnclick="addAll()">
        <input type="button" value="<" οnclick="removeone()">
        <input type="button" value="<<" οnclick="removeAll()">
    </div>

    <div class="a" >
         <select id="right" size="8"></select>
    </div>
</body>
<script type="text/javascript">
    var oleft = document.getElementById("left");
    var oright = document.getElementById("right");
    function addone(){
        var positionleft = oleft.selectedIndex;
        var textleft = oleft.options[positionleft].cloneNode(true);
        oright.appendChild(textleft);
        oleft.remove(positionleft);
    }
    function addAll(){
          for(var i = 0; i<oleft.length; i++){
              var text = oleft.options[i].cloneNode(true);
              oright.appendChild(text)
          }
        oleft.length = 0;
    }
    function removeone(){
        var positionright = oright.selectedIndex;
        var textright = oright.options[positionright].cloneNode(true);
        oleft.appendChild(textright);
        oright.remove(positionright);
    }
    function removeAll(){
        for(var i = 0; i<oright.length; i++){
            var text = oright.options[i].cloneNode(true);
            oleft.appendChild(text)
        }
        oright.length = 0;
    }
</script>
</html>

三、点击按钮将选中的内容向上移动、向下移动或者删除

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="#" method="post" id="frmTest">
        <select id="lstNews" size="8" multiple="multiple" style="display: block">
            <option value="1">aaaaaaa</option>
            <option value="2">bbbbbbb</option>
            <option value="3">ccccccc</option>
            <option value="4">ddddddd</option>
            <option value="5">eeeeeee</option>
        </select>
        <input type="button" id="btnUp" value="向上">
        <input type="button" id="btnDown" value="向下">
        <input type="button" id="btnDelete" value="删除">
    </form>
</body>
<script type="text/javascript">
    var oList = document.getElementById("lstNews");

    //删除
    document.getElementById("btnDelete").onclick = function() {
        for (var i = 0; i <= oList.length-1; i++) {
            if (oList.options[i].selected) {
                oList.remove(i);
            }
        }
    }

    //向上
    document.getElementById("btnUp").onclick = function() {
        if (oList.selectedIndex != -1) {
            if (oList.selectedIndex != 0) {
                oList.insertBefore(oList.options[oList.selectedIndex],oList.options[oList.selectedIndex-1]);
            }
        }
    }

    //向下
    document.getElementById("btnDown").onclick = function() {
        if (oList.selectedIndex != -1) {
            if (oList.selectedIndex != (oList.length-1)) {
                oList.insertBefore(oList.options[oList.selectedIndex+1],oList.options[oList.selectedIndex]);
            }
        }
    }
</script>
</html>