Javascript（四）javascript实现级联菜单

r囧r小猫 2022-05-17 02:59 136阅读 0赞

要实现这个功能，我们需要做三个步骤：

*  定义省和对应市的数据结构。
 *  利用省份下拉框的选项改变事件onChange。
 *  根据用户选择的省份，动态添加城市下拉框的值。

## 1、定义省和对应市的数据结构 ##

这里采用数组的方式定义，为了方便展示功能，这里仅仅定义几个省和市。

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> //初始化所有的信息 var cityarr=new Array(3); cityarr["广东省"]=["广州市","江门市","清远市"]; cityarr["广西省"]=["南宁市","桂林市","北海市"]; cityarr["山东省"]=["青岛市","济南市","烟台市"]; </td> 
 </tr> 
 </tbody> 
</table>

## 2、利用省份下拉框的选项改变事件onChange ##

定义一个selectcity()的函数，然后设计界面，绑定第一个省的select控件的onchange事件。

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> 省：&lt;select οnchange="selectcity()" id="first"&gt; &lt;option value="0"&gt;--请选择--&lt;/option&gt; &lt;option value="广东省"&gt;广东&lt;/option&gt; &lt;option value="广西省"&gt;广西&lt;/option&gt; &lt;option value="山东省"&gt;山东&lt;/option&gt; &lt;/select&gt; &lt;br /&gt;&nbsp; 市： &lt;select id="city"&gt; &lt;option&gt;--请选择--&lt;/option&gt; &lt;/select&gt; </td> 
 </tr> 
 </tbody> 
</table>

## 3、根据用户选择的省份，动态添加城市下拉框的值 ##

实现selectcity函数:

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> function selectcity(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var first=document.getElementById("first"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var city=document.getElementById("city"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//先清空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;city.options.length=0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(first.value==0){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var opt=new Option("--请选择--",0); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;city.add(opt); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//1、获得用户选择的值 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var i=0;i&lt; cityarr[first.value].length;i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var opt=new Option(cityarr[first.value][i],cityarr[first.value][i]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;city.add(opt); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;} </td> 
 </tr> 
 </tbody> 
</table>

效果如下：

![70][]

[70]: /images/20220517/26e1d28e95f1405ab9d61c12c9550c2f.png