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

 

posted @ 2017-08-02 10:24  kklam  阅读(827)  评论(0)    收藏  举报