H5之js拼接select与input的级联
来源:互联网 发布:行业分类数据库 mysql 编辑:程序博客网 时间:2024/06/05 07:50
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(); }
0 0
- H5之js拼接select与input的级联
- H5之js拼接select级联优化
- 动态拼接select的option(菜单级联)
- js 级联select
- JS 拼接select
- js得到input select的值
- JS中获取select、input的参数
- JavaScript -- Input Select 操作, 级联菜单
- js操作select标签级联
- JS-案例-Select级联选择
- JavaScript之Select级联选择
- 【H5】DIV分割与拼接(动画拼接)
- H5与android原生的JS交互
- js与h5的结合,初步学习。
- H5---input的placeholder问题
- 关于SELECT的无限级联
- 关于select的无限级联
- 基于JQuery的Select级联
- 游戏系统开发笔记(一)——立项、分工和制作基础
- Mybatis框架基础学习(四)
- 杭电acm--1021
- MQX 之串口使用
- SQLSTATE[HY000] [2002] No such file or directory php连接mysql失败
- H5之js拼接select与input的级联
- 游戏系统开发笔记(二)——开发流程和项目管理
- 第7周项目1-建立顺序环形队列算法库
- linux命令(12)如何查看linux系统版本
- 游戏系统开发笔记(三)——通用代码库
- PIC单片机之按键错误汇总
- php的self关键字和静态方法调用
- iOS基础知识Day01
- 1009. Product of Polynomials