<!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. ubuntu 查看系统是32位还是64位

    查看cpu信息 cat /proc/cpiinfo 查看ubuntu版本: cat /etc/issue 查看系统是32位还是64位 方法1: #查看long的位数,返回32或64 getconf L ...

  2. [UE4]GameMode

    GameMode定义了正在玩的游戏规则,积分等方面,游戏中有些数据和逻辑不适合放在某一个对象身上,这些数据在整个游戏运行中腰持续存在的(比如:积分.排名). 每次游戏一启动,GameMode就被创建, ...

  3. Unreal Engine 4 反射机制的实现

    转自:http://blog.csdn.net/noahzuo/article/details/51482255 反射机制 反射机制指的是程序可以在运行期间进行检测和修改自己状态的能力. UE4引擎使 ...

  4. Ubuntu下Code::Blocks错误

    #error This file requires compiler and library support for the ISO C++ 2011 standard. This support i ...

  5. AJAX相关总结

    AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 J ...

  6. Java技术栈

    内容: 1.Java基础(JavaSE) 2.数据结构与算法与设计模式 3.计算机理论知识 4.数据库 5.Java web(JavaEE) 6.消息队列 7.Linux及服务器相关 8.分布式相关 ...

  7. Selenium2+python自动化75-非input文件上传（SendKeys）

    前言 不少小伙伴问非input标签如何上传文档,这个本身就是一坑,无奈很多小伙伴非要跳坑里去,那就介绍一个非主流的上传文件方法吧,用第三方库SendKeys. 只支持python2环境 python3 ...

  8. Tornado之模板

    知识点 静态文件配置 static_path StaticFileHandler 模板使用 变量与表达式 控制语句 函数 块 4.1 静态文件 现在有一个预先写好的静态页面文件 (下载静态文件资源), ...

  9. smokeping配置方法

    smokeping配置加Nginx https://lala.im/2821.html  (不完整)

  10. 1.JSONObject与JSONArray的使用

    参考文献: http://blog.csdn.net/huangwuyi/article/details/5412500 1.JAR包简介 要使程序可以运行必须引入JSON-lib包,JSON-lib ...