<!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. 技巧：利用putty通过win7访问ubuntu

    .用apt-get直接安装SSHD服务所需相关软件包: sudo apt-get install openssh-server .开启服务: sudo /etc/init.d/sshd start p ...

  2. BPM编程模型(场景)

    一直开发基于操作的业务系统,主要就是通过界面,用户提交一些数据完成任务,大多数涉及多人协作的,基本都是浏览,少数可能对其进行审批,这里的审批不是电子政务那样的多人审批任务,仅仅是对数据的一个操作而已, ...

  3. Redis-基本数据类型与内部存储结构

    1-概览 Redis是典型的Key-Value类型数据库,Key为字符类型,Value的类型常用的为五种类型:String.Hash .List . Set . Ordered Set 2- Redi ...

  4. 经典算法 Manacher算法详解

    内容: 1.原始问题   =>O(N^2) 2.Manacher算法   =>O(N) 1.原始问题 Manacher算法是由题目“求字符串中长回文子串的长度”而来.比如 abcdcb 的 ...

  5. 网络命令ping/netstat/ipconfig/arp/tracert/nbstat

    1.1 Ping命令的使用 ping检测网络故障步骤: ping 127.0.0.1 ping环绕指针检测是否在计算上anzhaung了TCP/IP协议及配置是否正确 ping本机IP这个命令被被送到 ...

  6. 0_Simple__simpleSurfaceWrite

    使用表面写入函数,结合纹理引用实现图片的旋转▶ 源代码 #include <stdio.h> #include <windows.h> #include <cuda_ru ...

  7. Latex 箭头、下标、符号上下写文字、正方形和三角形

    0. hat   $abc\hat def$  $ab\widehat{cde}f$ 1. 箭头上的文字    $\underrightarrow{\text{你的文字}}$  ($A \xlefta ...

  8. PHP大小写是否敏感问题的汇总

      一.大小写敏感1. 变量名区分大小写view sourceprint?     <?php    $abc = 'abcd';    echo $abc; //输出 'abcd'     e ...

  9. jpa-jpql-basic-test

    jpql 基本测试 //可以使用 JPQL 完成 UPDATE 和 DELETE 操作. @Test public void testExecuteUpdate(){ String jpql = &q ...

  10. leetcode91

    class Solution { public int numDecodings(String s) { if(s.length()==0){ return 0; } int[] dp = new i ...