省份与城市对应选择的功能javascript

原创于 2011-02-09 14:52:00 发布 · 3.1k 阅读

·

0

·

本内容遵循CC 4.0 BY-SA版权协议

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

标签

#javascript #function #class #jquery

javascript 专栏收录该内容

66 篇文章

订阅专栏

本文介绍了一种使用纯 JavaScript 和 jQuery 实现的省市联动下拉框选择功能。通过两个下拉列表，用户可以选择省份和对应的城市。文章提供了详细的代码示例，包括 HTML 结构、JavaScript 函数以及 jQuery 的实现方式。

网页内的代码：

<body onload="loadprovince()"> <select id="province" onchange="cityitems()"> <option value="none">请选择省</option> </select> <select id="city"></select> </body>

javascript代码：

oSelect.options.add(new Option('显示', '真值', true, true));

var datas = { "河北": ["石家庄", "唐山", "衡水"], "山东": ["济南", "烟台", "滨州"], "广东": ["广州", "深圳", "汕头"] }; function loadProvince() { var province = document.getElementById("province"); for (var key in datas) { var option = document.createElement("<option value=''></option>");//创建省份的选项 option.value = key; option.innerText = key; province.appendChild(option);//在遍历过程中逐一添加省份的选项中 } } function showcities() { var province = document.getElementById("province"); var city = document.getElementById("city"); var currentprovine = province.value;//获取当前选中的省份 var currentcities = datas[currentprovine]; //获取选中省份对应的城市数组 //方法一：先去掉城市列表中的值然后再增加新内容 //city.options.length = 0; //方法二：先去掉城市列表中的值然后再增加新内容,对数组要进行倒着删除从而避免了方法三的问题 for (var i = city.childNodes.length-1; i >= 0; i--) { city.removeChild(city.childNodes[i]); } /*方法三：由于数据的排序问题会删不干净 for (var i = 0; i < city.childNodes.length; i++) { city.removeChild(city.childNodes[i]); } */ for (var i = 0; i < currentcities.length; i++) { var currentcity = currentcities[i]; var option = document.createElement("<option value=''></option>"); //创建城市的选项 option.value = currentcity; option.innerText = currentcity; city.appendChild(option); //在遍历过程中逐一添加到城市的选项中 } }

另外一种利用class的方法去掉city中的项：

var province = document.getElementById("province"); var city = document.getElementById("city"); //city.options.length = 0; //简单的清除方式 /*移除节点法 for (var i = city.childNodes.length - 1; i >= 0; i--) { city.removeChild(city.childNodes[i]); } */ var cityoptions = city.getElementsByTagName("option"); for (var i = cityoptions.length - 1; i >= 0; i--) { if (cityoptions[i].className == "citystyle") { city.removeChild(cityoptions[i]); } } var currentpe = province.value; //当前的省份 var citys = datas[currentpe]; //省份对应的城市 if (currentpe == "none") { return; } for (var i = 0; i < citys.length; i++) { var option = document.createElement("<option value='' class='citystyle'></option>"); option.value = citys[i]; option.innerText = citys[i]; city.appendChild(option); }

jquery版：

var datas = { "河北省": ["衡水", "保定", "石家庄"], "山东省": ["滨州", "济南", "青岛"], "广东省": ["广州", "深圳", "汕头"] }; $(function () { $.each(datas, function (key, value) { var option = $("<option value=" + key + ">" + key + "</option>"); $("#province").append(option); }); $("#province").change(function () { var selectprovine = $("#province").val(); //获取当前省份 $("#city option").remove(); //清空city列表 if (selectprovine == "none") { return; } $(datas[selectprovine]).each(function () { var cityoption = $("<option value=" + this + ">" + this + "</option>"); $("#city").append(cityoption); }); }); });

网页布局：

<select id="province"> <option value="none">请选择</option> </select> <select id="city"></select>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。