H5之js拼接select级联优化

记得上篇博文中用select和input实现了级联查询的效果，但是效果不是太好，这一次选择两个js中的select来实现级联查询。

<strong><span style="font-size:18px;"><select onchange='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>