在html中下拉菜單項有時我們選中第一個值時，第二個下拉列表的值也會隨之變化，例如籍貫選項

　　當我們選中第一個省份的值時，后邊城市的列表值都會隨之變化為選中省份的城市，具體實現js代碼如下：

　　1，我們用一個二維數組來放省份及城市

　　

<script type="text/javascript">$(function(){var arr=[];arr[0]=["蘇州","無錫","昆山","徐州"];arr[1]=["洛陽","三門峽","鄭州","開封"];arr[2]=["西安","寶雞","咸陽","延安"];arr[3]=["杭州","寧波","紹興","溫州"];arr[4]=["東莞","佛山","惠州","廣州"];$("#province").change(function(){$("#city").empty();var val=$(this).val();$.each(arr, function(index,sheng) {if(index==val){$.each(arr[index],function(i,shi){var txt=document.createTextNode(shi);var op=document.createElement("option");$("#city").append(op);$(op).append(txt);})}});});}); </script>

?2，我們用一個對象來放置省份及城市，具體代碼如下

<script　　$(function(){　　　　　 //創建一個對象，對象格式為 name:value,本例中value的值為一個數 var city={"蘇州":["蘇州","徐州","常州","昆山"], "河南":["鄭州","開封","洛陽","三門峽"], 　
　　　　　　"廣東":["東莞","惠州","廣州","佛山"]};/*當第一個下拉列表的值變化時觸發函數*/$("[name='sheng']").change(function(){//獲得當前選中的值var el=$(this).val();//清空第二個下拉列表$("[name='shi']").empty();//遍歷name為el的對象值$(city[el]).each(function(index,item){//創建文本節點var txt=document.createTextNode(item);//創建元素var op=document.createElement("option");/*將元素加入name為shi的元素中*/$("[name='shi']").append(op);$(op).append(txt);/*將文本添加進元素中*/})}); }); </script>

?

?

?html文件如下

<table><tr><td>籍貫</td><td><select id="province" name="province"><label for=""></label><option value="0">江蘇</option><option value="1">河南</option><option value="2">陜西</option><option value="3">浙江</option><option value="4">廣東</option></select><select id="city"></select></td></tr><tr><td>意向工作城市</td><td><select name="sheng"><option >蘇州</option><option >廣東</option><option >河南</option></select><select name="shi"></select></td></tr></table>

?

轉載于:https://www.cnblogs.com/Zs-book1/p/10479473.html

總結

以上是生活随笔為你收集整理的联动菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。