下拉框带搜索

1.引用 bootstrp

<script src="../Scripts/JS_DatePicker/WdatePicker.js"></script>
<script src="../Js/jquery-1.11.3/jquery.min.js"></script>
<script src="../js/bootstrap/bootstrap-select.js"></script>
<link href="../js/bootstrap/bootstrap-select.css" rel="stylesheet" />
<link href="../js/bootstrap/bootstrap.min.css" rel="stylesheet" />
<script src="../js/bootstrap/bootstrap.min.js"></script>

 

2.初始化

$(function () {
//$('.selectpicker').selectpicker({
// 'selectedText': 'cat'
//});
});

 

3.绑定

 <select id="sf" class="selectpicker bla bla bli"  data-live-search="true"   onchange="sf_ServerChange()"  runat="server"/> 

<select id="ds" class="selectpicker bla bla bli ssle"  data-live-search="true"   runat="server"/> 

 

4.绑定数据

function sf_ServerChange() {//第一种Ajax绑定
//var optionstring = "";
//$.ajax({
// url: "../AjaxPage/Handler.ashx",
// cache: false,
// data: { Type: "GetCity", province: $("#sf").val() },
// dataType: "json",
// success: function (data) {
// if (data != null) {
// for (var i = 0; i < data.length; i++) {
// optionstring += "<option value=\"" + data[i].City + "\" >" + data[i].City + "</option>";
// }
// }
// $("#Select2").html(optionstring);
// $('.selectpicker').selectpicker('refresh');//刷新
// }
//});
'<%=getcity()%>';//第二种后台加载方法
}