<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>二级联动作业 </title>

</head>

<body>

    <select id="s1" onchange="func1(this)">

    </select>

    <select id="s2">

    </select>

    <script>

        dict = {"内蒙古":["乌海","包头","呼和浩特","临河"],"湖南":["长沙","湘潭","株洲"],"广东":["深圳","广州","东莞"]};

        var father_ele = document.getElementById("s1");

        for (var i in dict){

            var son_ele = document.createElement("option");

            son_ele.innerText = i;

            father_ele.appendChild(son_ele)

        }

        function func1(self) {

            var city_father_ele = document.getElementById("s2");

            var index = self.options;

//            获取self标签下的所有的options

//            self.selectedIndex

//            获取选中的option标签的索引值

            var dele_son_list = city_father_ele.children;

            var dele_son_list_length = dele_son_list.length;

            if (dele_son_list_length != 0){

                for (var i = 0;i < dele_son_list_length;i++){

                    console.log(i);

                    city_father_ele.removeChild(dele_son_list[0]);

//                    i--;

                }

            }

            var select_ele = index[self.selectedIndex];

            var city_list = dict[select_ele.innerText];

            for (var i in city_list){

                var city_son_ele = document.createElement("option");

                city_son_ele.innerText = city_list[i];

                city_father_ele.appendChild(city_son_ele)

            }

        }

    </script>

</body>

</html>

　　

实现的效果如下

2、实现左右移动的作业

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>左右移动作业</title>

    <style>

        #div1,#div2,#div3{

            display: inline-block;

        }

        #s1,#s2{

            width: 100px;

            height: 200px;

            /*background-color: red;*/

        }

        #s1{

            background-color: red;

            font-style: italic;

        }

        #s2{

            background-color: green;

            font-style: inherit;

        }

        input{

            display: block;

        }

    </style>

</head>

<body>

    <div id="div1">

        <select id="s1" multiple="multiple" size="9">

            <option>选项1</option>

            <option>选项2</option>

            <option>选项3</option>

            <option>选项4</option>

            <option>选项5</option>

            <option>选项6</option>

            <option>选项7</option>

            <option>选项8</option>

            <option>选项9</option>

        </select>

    </div>

    <div id="div2">

        <input type="button" value="---->" onclick="add_one()">

        <input type="button" value="====>" onclick="add_all()">

        <input type="button" value="<----" onclick="delete_one()">

        <input type="button" value="<====" onclick="delete_all()">

    </div>

    <div id="div3">

        <select id="s2" multiple="multiple" size="9">

        </select>

    </div>

    <script>

        function add_one() {

            var left_option = document.getElementById("s1");

            var left_option_length = left_option.children.length;

            var add_father = document.getElementById("s2");

            for (var i = 0;i < left_option_length;i++){

                if (left_option[i].selected == true){

                    left_option[i].selected = false;

                    add_father.appendChild(left_option[i]);

                    i--

                }

            }

        }

        function add_all() {

            // alert("all")

            var left_option = document.getElementById("s1");

            var left_option_list = left_option.children;

            var left_option_length = left_option.children.length;

            var add_father = document.getElementById("s2");

            for (var i = 0;i < left_option_length;i++){

                if (left_option_list[0].selected == true){

                    left_option_list[0].selected = false;

                    add_father.appendChild(left_option_list[0]);

                }

                add_father.appendChild(left_option_list[0]);

            }

        }

        function delete_one() {

            var left_option = document.getElementById("s2");

            var left_option_length = left_option.children.length;

            var add_father = document.getElementById("s1");

            for (var i = 0;i < left_option_length;i++){

                if (left_option[i].selected == true){

                    left_option[i].selected = false;

                    add_father.appendChild(left_option[i]);

                    i--

                }

            }

        }

        function delete_all() {

            // alert("all")

            var left_option = document.getElementById("s2");

            var left_option_list = left_option.children;

            var left_option_length = left_option.children.length;

            var add_father = document.getElementById("s1");

            for (var i = 0;i < left_option_length;i++){

                if (left_option_list[0].selected == true){

                    left_option_list[0].selected = false;

                    add_father.appendChild(left_option_list[0]);

                }

                add_father.appendChild(left_option_list[0]);

            }

        }

    </script>

</body>

</html>

　　

实现效果如下

1、实现单选添加

2、实现多选添加

3、实现全选添加

4、实现单选删除

5、实现多选删除

6、实现全选删除

二级联动的作业&左右移动作业的更多相关文章

  1. iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装

    之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...

  2. asp.net 使用DroDownList来实现二级联动

    今天做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件. ...

  3. Select标签下拉列表二级联动级联

    首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID. var options=new Array(); $(document).ready(function(){ // ...

  4. 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动（xml方法）

    之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...

  5. 利用JavaScript来实现省份—市县的二级联动

    所谓省-市二级联动是指当选择省份下拉选择框时,市县的下拉框会根据选择的省市而有相应的市县加载出来,如下图所示选择"上海市",城市的下拉选择框只会出现上海的市县: 这种二级联动非常常 ...

  6. 省市二级联动（原生JS）

    代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...

  7. asp.net mvc jQuery 城市二级联动

    页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...

  8. Dwz下拉菜单的二级联动

    在DWZ文档中对组合框combox的是这样描述的: 在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name,  增加了属性:ref. ref 属 ...

  9. xml+js+html的二级联动

    首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市 内容如下: <?xml version="1.0" encoding="U ...

随机推荐

  1. shell脚本判断语句和循环语句

    if判断语句 exit跳出判读语句 不加exit的结果 read -n(不换行) 判断是否输入的是数字 read age[[ $age =~ ^[0-9]+$ ]]if [ $? -ne 0 ]; t ...

  2. Apache Doris通过supervisor进行进程管理

    下面一段文字是摘自doris官方文档:注:在生产环境中,所有实例都应使用守护进程启动,以保证进程退出后,会被自动拉起,如 Supervisor.如需使用守护进程启动,需要修改各个 start_xx.s ...

  3. PHP提取多维数组指定一列的方法大全

    目录 1 array_column函数法 2 array_walk函数法 3 array_map函数法 4 foreach循环法 5 array_map变种 PHP中对多维数组特定列的提取,是个很常用 ...

  4. 【转】ECharts3.x中的点击事件与行为

    在ECharts中主要通过 on 方法添加事件处理函数,ECharts中的事件主要分为两种,1)鼠标事件,在鼠标click  or  hove 时触发鼠标事件: 2)另外一种是在ECharts在做图形 ...

  5. UVA-673-栈-水题

    题意: 检测括号是否匹配,注意有空格 #include<stdio.h> #include<iostream> #include <strstream> #incl ...

  6. C_point指针

    1,关于C语言中变量的访问方式,直接访问[使用变量名直接引用,操作变量进行赋值,改变变量值等操作],间接访问--指针,一种指向变量飞, 程序对变如量的读写操作,实际是对变量所在的存储空间进行写入和取出 ...

  7. 0_Simple__simplePitchLinearTexture

    对比设备线性二维数组和 CUDA 二维数组在纹理引用中的效率 ▶ 源代码.分别绑定相同大小的设备线性二维数组和 CUDA 二维数组为纹理引用,做简单的平移操作,重复若干次计算带宽和访问速度. #inc ...

  8. php中点击链接直接下载图片

    最近需要一个功能,是点击链接,直接把图片下载下来,一般情况下,图片是在新页直接打开的,不会自动提示下载,在网上找来找,用这个挺好使,代码如下: $filename = basename($downfi ...

  9. wzben的QQ空间

    实习之后没有动过博客了,后续慢慢补.

  10. 1.mysql ERROR 1045 (28000): 错误解决办法

    转自:https://www.cnblogs.com/jpwz/p/6061214.html ERROR 1045 (28000): Access denied for user 'ODBC'@'lo ...