博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
H5之js拼接select与input的级联
阅读量:7296 次
发布时间:2019-06-30

本文共 2496 字,大约阅读时间需要 8 分钟。

Jquery combobox实现二级级联效果。

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

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

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

 

曾经这么想过,在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();          }

转载于:https://www.cnblogs.com/xzpblog/p/5117909.html

你可能感兴趣的文章
POJ3229
查看>>
用promise封装ajax
查看>>
git创建工程
查看>>
UIScrollView的contentSize、contentOffset和contentInset属性
查看>>
IOS开发之自定义UITabBarController
查看>>
关于UI设计中的交互软件Axure7.0运用
查看>>
将网站项目转为 Web form应用程序(转)
查看>>
泛型简要原理
查看>>
poj 1254 Hansel and Grethel
查看>>
VirtualBox安装CentOS7
查看>>
Java豆瓣电影爬虫——抓取电影详情和电影短评数据
查看>>
如何让程序在后台执行
查看>>
bzoj3296[USACO2011 Open] Learning Languages*
查看>>
关于浮动元素对父元素高度的影响
查看>>
Mysql 关键字的优先级 分组 多表联查
查看>>
java 调用js
查看>>
iOS开发UI篇—Quartz2D使用(图形上下文栈)
查看>>
Oracle迁移MySQL笔记
查看>>
Building a Pub/Sub Message Bus with Wcf,Msmq,IIS
查看>>
Mybatis实现批量删除
查看>>