<!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. 部署DNS从服务器

    修改主服务器中区域信息文件: # vi /etc/named.rfc1912.zones 检查配置文件是否有错误 # named-checkconf 重启named服务程序,让配置文件生效 #syst ...

  2. linux date -d参数用法

    最近偶为了写一个调整时间的shell而绞尽脑汁,结果在某一天#info data这里面看到了data -d参数的灵活用法,真是欣喜若狂.好东西要保存,整理整理: * To print the date ...

  3. [UE4]OnComponentBeginOverlap.AddDynamic 的编译错误

    以 Character 类为例,假设有 PacManCharacter 派生自 Character类首先在 PacManCharacter.h 头文件中添加碰撞函数的声明: OnCollision 为 ...

  4. 学习MongoDB 二：MongoDB添加、删除、修改

    一.简介 MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSQL数据库产品中最热门的一种.数据被分组存储在数据集中,被称为一个集合(Collenction)和对于存储在MongoDB ...

  5. vue&webpack多页面配置

    前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...

  6. python 编写远程连接服务器脚本

    import paramiko client = paramiko.SSHClient()client.set_missing_host_key_policy(paramiko.AutoAddPoli ...

  7. 1. SVN clean失败解决方法

    svn执行clean up后出现提示:svn cleanup failed–previous operation has not finished; run cleanup if it was int ...

  8. HTML5 借助http请求发送formdata对象,从而上传文件 XMLHttpRequest, FormData

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. leetcode949

    public class Solution { public string LargestTimeFromDigits(int[] A) { ); ; ; foreach (var nums in l ...

  10. springMVC之Interceptor拦截器

    转自:https://blog.csdn.net/qq_25673113/article/details/79153547 Interceptor拦截器用于拦截Controller层接口,表现形式有点 ...