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; //必须选择参数,默认为falsecombobox.prototype.fieldText = "text"; //设置数据源文本命名,默认为textcombobox.prototype.fieldValue = "id"; //设置数据源id命名,默认为idcombobox.prototype.maxLength = 5; //自动搜索显示20项,默认为null.即不限制//初始化所有comboboxcombobox.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();}

版权声明:本文为博主原创文章,未经博主允许不得转载。

,我想一个人旅行,背上简单的行囊,踏上行程,

H5之js拼接select与input的级联

相关文章:

你感兴趣的文章:

标签云: