<!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. Linux 简单命令查询CPU、内存、网卡等信息

    [转自]Linux查询CPU.内存.网卡等信息 看CPU信息(型号)# cat /proc/cpuinfo | grep name | cut -f2 -d: |uniq -c      1  Int ...

  2. configure: error: You need a C++ compiler for C++ support.

    安装pcre包的时候提示缺少c++编译器 报错信息如下: configure: error: You need a C++ compiler for C++ support. 解决办法,使用yum安装 ...

  3. ajax控制页面跳转

    一开始我是这么写的,一直报错,跳转路径解析不了,显示为问号: 前台html: <form> <table style="margin: 200px auto;"& ...

  4. sqlserver操作命令

    启动命令:Net Start MSSqlServer 暂停命令:Net Pause MSSqlServer 重新启动暂停的命令:Net Continue MSSqlServer 停止命令:Net st ...

  5. c++官方文档-指针

    #include<stdio.h> #include<iostream> #include<queue> #include<map> #include& ...

  6. 怎么爆加密过后的前端JS

    网站地址,保密,下面进入主题 页面元素和JS代码 无法看 用谷歌浏览器,选择器选中提交按钮,注意看界面元素源码 onclick="$('#submitForm').submit()" ...

  7. menu 一组 只能选择一个

    menu 一组 只能选择一个 将属性表的 groupindex 给一个值,假设你有三个Lang选项 就把这三个 manuitemex.groupindex 都设成同一个编号 (ex: 10) 以及把 ...

  8. shelve模块使用说明

    一种字典形式储存数据的方式 import datetime, shelve d = shelve.open('shelve_test.txt') info = {'age':22, 'job':'it ...

  9. rem 的使用

    1.填加以下代码 (function (designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentE ...

  10. c++11新特性总结(转)

    1.类型与变量相关 1.1.nullptr: 取代了NULL,专用于空指针 1.2.constexpr: 近似const, 可以修饰变量,也可以修饰函数, 修饰变量如: const int globa ...