html结合JavaScript简单的城市下拉列表

来源：互联网发布：sinx幂级数展开知乎编辑：程序博客网时间：2024/05/28 03:02

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body>

//定义第一个下拉列表<select id="prov" onchange="change();">      //当点击第一个下拉列表时回调一个函数 change（）；</select>//定义第二个下拉列表
<select id="city"></select><script>    var pr=["北京","河北","天津","河南"];   //将第一个下拉列表里的内容保存到一个数组里    var citys= [["朝阳区","东城区","西城区","大兴区","通州区"],          //将第二个下拉列表里的内容保存到一个二维数组里                 ["石家庄","沧州","保定","承德","邯郸"],                 ["武清","虹桥","河西","塘沽","西青"],                 ["郑州","洛阳","南阳","安阳","驻马店"],                 ["福州","厦门","晋江","南平","泉州"]                 ];    select1=document.getElementById("prov");   //获取第一个下拉列表对象    select2=document.getElementById("city");   //获取第一个下拉列表对象
    var ops="";        //定义一个变量为空    for(var i=0;i<pr.length;i++){      ops=ops+"<option value='"+i+"'>"+pr[i]+"</option>";    //用for循环写出下拉列表值，并且标一个value值    }    select1.innerHTML=ops;    //将for循环中的内容 写到相应的标签中  innerHTML的意思就是将内容写到html的标签中  例如这句就是写到了标签id=prov 的标签中

    var ops="";//定义一个变量为空    for(var i=0;i<citys.length;i++){        ops=ops+"<option>"+citys[0][i]+"</option>"    }    select2.innerHTML=ops;

    function change(){        //点击第一个下拉列表时调用的函数

//首先调用这个函数是我们可以先测试一下

 //alert（select_1.value）；  尝试后大家可以发现点击不同的城市会弹出0,1,2,3,4···不同的数字 这些不同的数字就代表着保存第一个下拉列表数组的下标所以下边的for循环里就会用到        var select_1 = document.getElementById("prov");    //再次获取第一个下拉列表对象  准备在for循环里用        var ops="";        for(var col=0;col<citys[select_1.value].length;col++){            ops=ops+"<option>"+citys[select_1.value][col]+"</option>";        }       var select_2=document.getElementById("city");        select_2.innerHTML=ops;          }</script></body></html>

以上内容如果在数组这一方面基础不太好的话可能会有点难理解，这些代码千万不要复制，粘贴，因为有些东西我是用中文拼音写的，只要好好看看会理解的；

1 0