最近做了一个下拉框筛选的功能,下面就介绍一个
引用的是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());
}
效果图: