实现的html
<tr>
<td class="td_s"><span style="color: #f00">*</span>村地址</td>
<td class="td_i" colspan="3">
<select name="szqx" id="szqx" style="width: 30%"></select>
<select name="szxz" id="szxz" style="width: 30%"></select>
<select name="szcl" id="szcl" style="width: 30%"></select>
</td>
</tr>
已有的树结构数据
实现级联的代码
var obj = {
};
var obj1 = {
};
obj = getfirst();
obj1 = getlast();
for (var x in obj) {
$("<option>" + x + "</option>").appendTo("#szqx");
}
$("#szqx").change(function () {
var arr = $(this).val();
var arr1 = obj[arr];
$("#szxz").html("");
for (var i = 0; i < arr1.length; i++) {
$("<option>" + arr1[i] + "</option>").appendTo("#szxz");
}
$("#szxz").change();
});
$("#szxz").change(function () {
var arr2 = $(this).val();
var arr3 = obj1[arr2];
$("#szcl").html("");
for (var j = 0; j < arr3.length; j++) {
$("<option>" + arr3[j] + "</option>").appendTo("#szcl");
}
});
$("#szqx").change();
数据处理
function getData() {
return data;
}
function getfirst() {
let arr = {};
let temp = data.children;
for (let index = 0; index < temp.length; index++) {
let tempArr = [];
let oneList = temp[index];
for (let jindex = 0; jindex < oneList.children.length; jindex++) {
tempArr.push(oneList.children[jindex].text);
}
arr[oneList.text] = tempArr;
}
return arr;
}
function getlast() {
let arr = {};
let temp = data.children;
for (let index = 0; index < temp.length; index++) {
let oneList = temp[index];
for (let jindex = 0; jindex < oneList.children.length; jindex++) {
var lastList = oneList.children[jindex];
let tempArr = [];
for (let zindex = 0; zindex < lastList.children.length; zindex++) {
tempArr.push(lastList.children[zindex].text);
}
arr[lastList.text] = tempArr;
}
}
return arr;
}
实现的效果