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

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

Dear 丶 2022-05-16 20:33 526阅读 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>