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

最新推荐文章于 2024-07-18 10:51:00 发布

九

最新推荐文章于 2024-07-18 10:51:00 发布

阅读量8.5k

点赞数 3

分类专栏： javaScript html5 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_31301099/article/details/50160277

版权

html5 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

javaScript

19 篇文章 0 订阅

订阅专栏

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

//定义第一个下拉列表
<select id="prov" οnchange="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>