H5之js拼接select与input的级联

Jquery combobox实现二级级联效果。

最近在通过js中的拼接实现input和select的下拉框级联效果，功夫不负有心人终于可以分享一下自己的劳动成果了。

很简单的应用，如果使用服务器下拉框控件，添加几个事件，相信能够轻松的解决，但是现在所有的操作都是在js中进行的。

如代码所示，仅仅通过input和select拼接来实现级联功能，确实增加了很大的难度。

    <select onchange='return getValue(this.value," + i + ")' id='SOilCorpName" + i + "'>" + SetOilName(ListContent[i].SOilCorpName) + "</select><input id='SRefineFactoryName" + i + "' readonly value='" + ListContent[i].SRefineFactoryName + "' />

曾经这么想过，在select中添加onchange事件，然后触发事件，将参数传到后台，根据参数查询出结果，绑定到input域中，但是从js中怎么来触发后台事件，曾经想过用ajax来实现，但是相对来说太复杂了。

最后采用的是，将被级联的数据全部加载出来，然后传到前台，在js中接受，在onchange事件中与下拉点击的参数进行对比。

function getValue(result, i) {
            var opt1 = '<%= FactoryNamelist%>'
            var ListOpt = new Array();
            var optionList = opt1.split(';');
            if (optionList != "") {
                for (var j = 0; j < optionList.length; j++) {
                    var optionListItem = optionList[j].split(',');
                    if (optionListItem[2] == result) {
                        ListOpt += optionListItem + ";";
                    }
                }
                              if (ListOpt.length > 1) {
                    ListOpt = ListOpt.substr(0, ListOpt.length - 1);
                } else {
                    ListOpt = "";
                }
                BindCombobox(ListOpt, '#SRefineFactoryName' + i, '#SRefineFactoryCode' + i);
            }
    }

然后调用在网上能够查到封装的方法：

function BindCombobox(opt,controlid,controlValueId)
    {
         var optionList = opt.split(';');
                
        combobox.prototype.mustSelect = false; //必须选择参数,默认为false
        combobox.prototype.fieldText = "text"; //设置数据源文本命名，默认为text
        combobox.prototype.fieldValue = "id"; //设置数据源id命名，默认为id
        combobox.prototype.maxLength = 5; //自动搜索显示20项,默认为null.即不限制
        //初始化所有combobox
        combobox.prototype.init(controlid, "../../../Resource/Images/dropdown.gif");
        //绑定
        var combo = new combobox(controlid,controlValueId);
        var datasource ="[";
           
        if (optionList!="")
        {
            for(var j = 0 ; j < optionList.length ; j ++ )
            {
                var optionListItem = optionList[j].split(',');
                datasource =datasource+"{ id: '"+optionListItem[0]+"', text: '"+optionListItem[1]+"'},";                                   
            }
            if (datasource !="[")
            {
                datasource=datasource.substr(0,datasource.length-1);
            }
        }
        else
        {
            datasource=datasource +"{ id: '', text: ''}";  
        }
        datasource =datasource+ ']';
        combo.dataSource = eval(datasource);
        combo.dataBind();  
    
    }