jquery.combo.select.js下拉框筛选

最近做了一个下拉框筛选的功能,下面就介绍一个

引用的是jQuery的jquery.combo.select.js  下载地址:

需要引用的js: jquery-1.7.2.min.js 和 jquery.combo.select.js

需要引用的css: combo.select.css

html代码:

 <!--给这个div做下拉框你筛选-->
                <div id='divDianpu' class="zzsc">
                                    <select id='dianpu' name='dianpu' class="search">
                                        
                                    </select></div>
js代码:

  //得到店铺
        function GetDepartment() {
            $.ajax({
                type: 'post',
                async: true,
                data: {},
                url: '../../Webservice/KPXT.asmx/GetDepartment',
                beforeSend: function () {
                    fnAjaxLoad(true);
                },
                complete: function () {
                    fnAjaxLoad();
                },
                success: function (di) {
                    var data = eval(di);

                    var module = document.getElementById("dianpu");//通过ID获取
                    var opt = document.createElement('option');
                    opt.appendChild(document.createTextNode(""));
                    opt.setAttribute("value", "");
                    module.appendChild(opt);

                

                    $.each(data, function (i, d) {
                        var module = document.getElementById("dianpu");
                        var opt = document.createElement('option');
                        opt.appendChild(document.createTextNode(d.Departmentzh_cn));
                        opt.setAttribute("value", d.Department);
                        module.appendChild(opt);

                    });

                    $(".search").comboSelect();
                }
            });
        }
后端代码:

    ///获取所有部门 
        /// </summary>
       [WebMethod(EnableSession = true)]
        public void GetDepartment() {

            string strSql = "SELECT  Department,Departmentzh_cn FROM  dbo.xhs_Department";
            DataTable dt = MsSqlHelper.GetDataTable(strSql);
            HttpContext.Current.Response.Write(dt.ToJSON());


        }

效果图:



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值