javascript使用select标签如何实现省市联动,级联下拉列表

Dear 丶 2022-05-16 20:33 474阅读 0赞

select对象  
属性：  
options：获得所有的option对象,返回option的数组  
selectIndex：获得当前选中项在option中的索引号  
方法：  
add()：用于添加新的Option对象  
add(new Option(text,value,isSelected))  
//第1个参数设置显示的文本  
//第2个参数设置value的值  
//第3个参数设置当前项是否选中  
Option对象：  
属性：  
text：显示的文本值  
value：这个值是给服务器  
事件：  
onchange：在选项发生改变时触发

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript"> var provinceArray;//一维数组 /** * 改变省份时城市的下拉值变化 */ function onProvince(){ var provinceObj=document.getElementById("province");//省 var cityObj=document.getElementById("city");//市 //清空cityObj下的所有option对象 cityObj.options.length=0; for(var i in provinceArray){ //判断省份的下拉框的选中值与二维数组中的省份进行比较是否相同 //i广东省跟第一个下拉列表的值相等就给第二个下拉列表添加值 if(i==provinceObj.options[provinceObj.selectedIndex].value){//options[provinceObj.selectedIndex]表示当前被选中的省份的序号,然后.value获取值 for(var j in provinceArray[i]){ //将城市添加到cityObj对象下 cityObj.add(new Option(provinceArray[i][j],provinceArray[i][j])); } } } } //初始化二维数组的值 function onInit(){ provinceArray=new Array();//一维数组 //分别设置各省下的城市 provinceArray["广东省"]=new Array("广州市","深圳市"); provinceArray["广西省"]=new Array("南宁市","桂林市"); //初始化省的下拉框的值 var provinceObj=document.getElementById("province"); for(var index in provinceArray){ //new Option(text,value,isSelected) //第1个参数设置显示的文本 //第2个参数设置value的值 //第3个参数设置当前项是否选中 provinceObj.add(new Option(index,index)); } } window.onload=function(){ onInit(); } </script>
        </head>
        <body>
            省：<select id="province" onchange="onProvince()"></select>
            市：<select id="city"></select>
        </body>
    </html>