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代码:

 
                
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();
                }
            });
        }
后端代码:

    ///获取所有部门 
        /// 
       [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());


        }

效果图:

jquery.combo.select.js下拉框筛选_第1张图片

你可能感兴趣的:(js)