JS与Jquery之动态添加下拉框select并级联改变事件

JavaScript012

JS与Jquery之动态添加下拉框select并级联改变事件,第1张

1.可以动态添加多个下拉框,可减少下拉框

2.选中第一个下拉框的任意一个值,同时第三个下拉框的值跟着改变,显示对应的数据。

ps:what?光动态添加就足以。。。。赋值还不能直接赋,而是添加下拉时就赋值。。。。。经过百般折磨,头发掉了n根,最终通过巧妙的思路解决了,在此记录下。若对你有所帮助,点赞加关注吧!后续及时更新。

第一个下拉选项显示

选择下拉项,同时加载数据到第三个下拉框

注:在这里直接去掉了第二行的标签

为了获取改变数据的行,试了很久,动态生成的下拉框无法获取到索引,所以才想到了使用id,并且给id后加一个数字

(1)var provs={},存储省市的json结构数据。

(2)function loadProv() {},此函数实现了初始化页面加载数据的功能。

(3)var prov = document.getElementById("prov"),获取存放省份的select下拉菜单。

(4)for (var key in provs),遍历json结构数据。

(5)var provName = key,获取省份的名称。

(6)var optProv = document.createElement("option"),创建一个option元素对象。

(7)optProv.value = provName,设置option元素的value属性值。

(8)optProv.innerText = provName,设置option显示的文本内容。

(9)prov.appendChild(optProv),将option元素添加到select下拉菜单。

(10)function provChange() {},作为onchange事件处理函数。

(11)var prov = document.getElementById("prov"),获取省份下拉菜单。

(12)var city = document.getElementById("city"),获取城市下拉菜单。

(13)var provName = prov.value,获取当前选中的省份的value值。

(14)if (provName == "none") {

city.style.display = "none"

return

},如果值等于none,说明选中的是第一项,那么城市下拉菜单还是具有隐藏状态,并跳出函数。

(15)else {

city.style.display = ""

},否则的话显示出城市下拉菜单,默认状态它是隐藏的。

(16)var citys = provs[provName],获取城市,citys是个数组。

(17)for (var index = city.childNodes.length - 1index >= 0index--) {

var child = city.childNodes[index]

city.removeChild(child)

},遍历城市下拉菜单下的option元素,然后删除这些元素。

之所以清空就是为了防止当再次加载的时候出现累加情况。

(18)for (var index = 0index <citys.lengthindex++) {},遍历数组中的元素,也就是城市。

(19)var optCity = document.createElement("option"),创建option元素。

(20)optCity.value = citys[index],设置option元素的value值。

(21)optCity.innerText = citys[index],设置option元素的文本内容。

(22)city.appendChild(optCity),将option元素添加select下拉菜单。

数据表形式数据

json形式数据