记得上篇博文中用select和input实现了级联查询的效果,但是效果不是太好,这一次选择两个js中的select来实现级联查询。
<strong><span style="font-size:18px;"><select οnchange='return getValue(this.value," + i + ")' id='SOilCorpName" + i + "'>" + SetOilName(ListContent[i].SOilCorpName) + "</select></span></strong>
<strong><span style="font-size:18px;"><span style="font-family: Arial, Helvetica, sans-serif;"><select id='SOilCorpName" + i + "'>" + SetFactoryName(ListContent[i].SOiFactoryName) + "</select></span></span></strong>
这次是对onchange事件进行了优化,上次是使用jQuery封装的方法,这次是将原先的select域清空,然后在将其加载进去。
来看看这个方法吧:
function getValue(result, i) {
应该先清除原先的下拉框,然后在添加一个下拉框
var leng = document.getElementById("SRefineFactoryName" + i).length
for (j = leng; j >= 0; j--) {
document.getElementById("SRefineFactoryName" + i).options.remove(j);
}
var t = document.getElementById("SRefineFactoryName" + i);
var factory = "";
var vaid = "";
for (var n = 0; n < optionList.length; n++) {
var optionListItem = optionList[n].split(',');
if (optionListItem[2] == result) {
factory = optionListItem[1]; //名称
vaid = optionListItem[0]; //id
var opt = new Option(); //必须在循环内
opt.value = vaid;
opt.text = factory;
t.options.add(opt); //循环加到下拉框中
}
}
}
调用结束上面这个方法以后,然后在来加载第二select输入域,当页面开始加载的时候,要保证第二个文本框有值得存在,而且要和前面的级联,所以要考虑周全,做好级联要保证在页面加载,添加一行,删除一行等所有的情况下都考虑清楚。
<strong><span style="font-size:18px;">function SetFactoryName(Result) {
var opts = "";
for (var i = 0; i < optionList.length; i++) {
var optionListItem = optionList[i].split(',');
if (Result && Result == optionListItem[0]) {
opts += "<option value='" + optionListItem[0] + "' selected>" + optionListItem[1] + "</option>";
}
else {
opts += "<option value='" + optionListItem[0] + "'>" + optionListItem[1] + "</option>";
}
}
return opts;
}
</span></strong>