基于js实现二级下拉联动
本文实例为大家分享了js下拉联动的具体代码，供大家参考，具体内容如下
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
</head>
<body>
<selectid="chengshi"onChange="change()">
<optionselected="selected">上海</option>
<option>苏州</option>
</select>
<selectid="quxian">
<optionselected="selected">浦东新区</option>
<option>徐汇</option>
<option>长宁</option>
<option>普陀</option>
<option>闸北</option>
<option>虹口</option>
<option>杨浦</option>
<option>黄浦</option>
<option>卢湾</option>
<option>静安</option>
<option>宝山</option>
<option>闵行</option>
<option>嘉定</option>
<option>金山</option>
<option>松江</option>
<option>青浦</option>
<option>南汇</option>
<option>奉贤</option>
<option>崇明</option>
</select>
<script>
functionchange()
{
varx=document.getElementById("chengshi");
vary=document.getElementById("quxian");
y.options.length=0;//清除second下拉框的所有内容
if(x.selectedIndex==0)
{
y.options.add(newOption("浦东新区","0",false,true));
y.options.add(newOption("徐汇","1"));//默认选中省会城市
y.options.add(newOption("长宁","2"));
y.options.add(newOption("普陀","3"));
y.options.add(newOption("闸北","4"));
y.options.add(newOption("虹口","5"));
y.options.add(newOption("杨浦","6"));
y.options.add(newOption("黄浦","7"));
y.options.add(newOption("卢湾","8"));
y.options.add(newOption("静安","9"));
y.options.add(newOption("宝山","10"));
y.options.add(newOption("闵行","11"));
y.options.add(newOption("嘉定","12"));
y.options.add(newOption("金山","13"));
y.options.add(newOption("松江","14"));
y.options.add(newOption("青浦","15"));
y.options.add(newOption("南汇","16"));
y.options.add(newOption("奉贤","17"));
y.options.add(newOption("崇明","18"));
}
if(x.selectedIndex==1)
{
y.options.add(newOption("辖张家港市","0",false,true));//辖张家港市、常熟市、太仓市、昆山市、吴江市，吴中区、相城区、平江区、沧浪区、金阊区，以及苏州工业园区和苏州高新区虎丘区。
y.options.add(newOption("常熟市","1"));//默认选中省会城市
y.options.add(newOption("太仓市","2"));
y.options.add(newOption("昆山市","3"));
y.options.add(newOption("吴江市","4"));
y.options.add(newOption("吴中区","5"));
y.options.add(newOption("相城区","6"));
y.options.add(newOption("平江区","7"));
y.options.add(newOption("沧浪区","8"));
y.options.add(newOption("金阊区","9"));
y.options.add(newOption("苏州工业园区","10"));
y.options.add(newOption("苏州高新区","11"));
y.options.add(newOption("虎丘区","12"));
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。