标签：fun 维数 element ble 苏州 代码 for 函数 ==
在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>
标签：fun 维数 element ble 苏州 代码 for 函数 ==
原文地址：https://www.cnblogs.com/Zs-book1/p/10479473.html
