zoukankan      html  css  js  c++  java
  • select两个关联的下拉列表

    今天用到两个关联的select,整理一下代码,仅供参考

    如下:

    <html> 

    <head>

    <meta charset="UTF-8">

    <title></title>

    </head> 

    <script language="javascript"> 

    function changeProvince() {

    var slecctS = document.querySelectorAll(".select");

    var countrys = new Array();

    countrys["0"] = ["--请选择所在省份和地区--"];

    countrys["北京市"] = ["朝阳区", "东城区", "西城区", "海淀区", "宣武区", "丰台区"];

    countrys["上海市"] = ["宝山区", "长宁区", "闵行区", "杨浦区","黄浦区","虹口区","静安区"];

    countrys["广州省"] = ["广州市", "珠海市", "汕头市", "揭阳市", "潮州市", "湛江市"];

    countrys["深圳市"] = ["福田区", "南山区", "宝安区", "龙岗区", "盐田区", "罗湖区"];

    countrys["重庆市"] = ["万州区", "渝中区", "大渡口区", "江北区", "沙坪坝区", "渝北区"];

    countrys["天津市"] = ["和平区", "河东区", "河西区", "南开区", "红桥区", "武清区"];

    var value = slecctS[0].value;

    //option 集合可返回包含 <select> 元素中所有 <option> 的一个数组。

    //注意: 数组中的每个元素对应一个 <option> 标签 - 由 0 起始。 

    slecctS[1].options.length = 0;

    var option;

    for(i = 0; i < countrys[value].length; i++) {

    //new Option("文本","值",true,true)

    //后面两个true分别表示默认被选中和有效!

     

    option = new Option(countrys[value][i], countrys[value][i]);

    slecctS[1].options.add(option);

    slecctS[1].options.selected=countrys[value][0];

    }

    if(slecctS[0].value == "0"){

    slecctS[1].disabled = true;

    }

    else{

    slecctS[1].disabled = false;

    } 

    }

    </script>

    </head> 

    <body>

    <form method="post" action="" name="myForm">

    国家:

    <select name="country" onChange="changeProvince()" class="select"

    <option value="0">--请选择省/城市--</option>

    <option value="北京市">北京市</option>

    <option value="上海市">上海市</option>

    <option value="广州省">广州省</option>

    <option value="深圳市">深圳市</option>

    <option value="重庆市">重庆市</option>

    <option value="天津市">天津市</option>

    </select>

    <select name="province" class="select">

    <option>--请选择所在省份和地区--</option>

    </select>

    </form>

    </body> 

    </html> 

    <!--

    with(document){}

    with 语句用于设置代码在特定对象中的作用域

    with(document)

    {.title='aaa';

    }相当于:

    document.title='aaa';

    option的属性:

    属性描述
    length 返回集合的option元素数目
    selectedIndex 设置或者返回select对象已选选项的索引值。(以 0 起始)

    option的方法:

    index] 以数字形式指定元素索引 (以 0 开始)
    [add(element[,index])] 在集合中添加option元素
    item(index) 以数字索引返回集合中元素
    namedItem(name) 以名称为索引返回集合元素
    remove(index) 从集合中移除元素

     

    -->

  • 相关阅读:
    jQuery教程1,隐藏p标签
    Google 和 Microsoft 对 jQuery 的支持都很好。
    在编辑器中自动换行
    调用存储过程的一些方法
    jQuery教程2隐藏p标签内容按钮
    文件的复制,移动,创建
    网站中access数据库的备份和恢复
    修改文件名称
    生成静态网页,函数,引用过程
    网页中打印文本文件
  • 原文地址:https://www.cnblogs.com/simba-lkj/p/6014838.html
Copyright © 2011-2022 走看看