bootstrap-select详细语句分析,如有错误请指出,感谢。
最近项目用到bootstrap的很多插件,之前分享过了bootstrap-table,今天分享一个bootstrap-select 下拉框的插件,详细看代码
HTML:
<td>
<input type="text" v-model="condition.Key" style="width: 300px;" />
<select id="cboKeyWordType" data-width="200px"></select>
</td>
js
$(document).ready(function () { InitSelectWithNoSearch("cboKeyWordType", "/Admin/Common/BindInvoiceStatus"); InitSpecialItem(); cover(); });
工具类
function InitSelectWithNoSearch(eid, url) { var tempAjax = ""; //多选下拉框功能插件 参考图1官方文档 $("#" + eid).selectpicker({ liveSearch: false, size: 10 //width: '300px' }); //ajax请求 $.ajax({ //数据发送方式 type: "post", //被加载数据的URL地址 url: url, //回调函数,接受服务器端返回给客户端的值,即result值 success: function (data) { //遍历处理data,可以是数组、DOM、json等,取决于直接给定或者ajax返回的类型 function (index, value)中index是当前元素的位置,value是值。 $.each(data, function (i, n) { //<option> 与 <option/> 之间的值是浏览器显示在下拉列表中的内容,而 value 属性中的值是表单被提交时被发送到服务器的值。 tempAjax += "<option value='" + n.id + "'>" + n.text + "</option>"; }); //.empty和.append作用是多级菜单,当一级菜单改变的时候,清除二级菜单里面的数据再进行加载 $("#" + eid).empty(); $("#" + eid).append(tempAjax); //更新内容刷新到相应的位置,ajax请求的数据添加到下拉框的时候必须有render和refresh操作不然不显示 $("#" + eid).selectpicker('render'); $("#" + eid).selectpicker('refresh'); } }); }

图1

浙公网安备 33010602011771号