zoukankan      html  css  js  c++  java
  • 做多重下拉列表?

    如何做省份的下拉列表?

    1获取select对象       var selProv=getEl("prov");//获取对象

    2,遍历select对象        selProv.options[n]=opt;

    3,获取省份对象          

    var prov=new Array(2);
    prov["陕西"]=["西安","渭南","咸阳","汉中"];
    prov["河南"]=["郑州","洛阳","开封"];
    prov["四川"]=["成都","广元"];

    4,遍历省份对象           

    for(var p in prov){
    var opt=new Option(p);//创建一个Option对象
    selProv.options[n]=opt;
    n++;

    如何获取市的下拉列表?

    1获取select对象       var selCity=getEl("city")

    2,遍历select对象     selCity.options[i]=opt;   

    3,获取市对象     var citys=prov[p];

    4,遍历市的对象  

    for(var i=0;i<citys.length;i++){
    var opt=new Option(citys[i]);
    selCity.options[i]=opt;
    }

    全部代码:

    <select id="prov" onchange="selCity(this);">
    </select>省
    <select id="city"></select>市
    <script>
    var prov=new Array(2);
    prov["陕西"]=["西安","渭南","咸阳","汉中"];
    prov["河南"]=["郑州","洛阳","开封"];
    prov["四川"]=["成都","广元"];

    function getEl(id){
    return document.getElementById(id);
    }

    //初始化省份
    function initProv(){
    var selProv=getEl("prov");//获取对象
    var n=0;
    for(var p in prov){
    var opt=new Option(p);//创建一个Option对象
    selProv.options[n]=opt;
    n++;
    }
    selCity(selProv);
    }

    function selCity(o){
    var p=o.value;
    var citys=prov[p];
    var selCity=getEl("city");//获取HTML对象
    //清除
    selCity.options.length=0;

    for(var i=0;i<citys.length;i++){
    var opt=new Option(citys[i]);
    selCity.options[i]=opt;
    }
    }


    initProv();
    </script>
    </body>

     

  • 相关阅读:
    css布局
    css笔记
    css笔记
    css笔记
    HttpServletResponse简单理解
    SpringCloud Zuul网关的简单理解
    SpringCloud Zuul网关超时
    notepad++实用技巧
    Json常用代码
    含有Date属性的对象转化为Json
  • 原文地址:https://www.cnblogs.com/tian114527375/p/4903059.html
Copyright © 2011-2022 走看看