基於bootstrap的multiple-select下拉控件使用

multiple-select是一款優秀的下拉菜單控件，能夠支持單選和多選。

詳細參考文檔：

JS組件系列——兩種bootstrap multiselect組件大比拼

multiple-select

本項目通過使用控件multiple-select實現動態創建單選和多選下拉控件

這里做個小說明：一開始我選用的控件為bootstrap-multiselect  后來，由於我的需求中有個要求：單選下拉默認是不需要有選中項，而bootstrap-multiselect默認會選中一個下拉，multiple-select則不會。

---

        

 使用步驟如下：

1、分別在 bootstrap.css 和 bootstrap.js 后引入 multiple-select.css 和 multiple-select.js 

2、聲明下拉控件：單選和多選下拉聲明方式是一致的

<select id="ft_' + ftCtrName + '" name="ft_' + ftCtrName + '" value="' + ftCtrValue + '" placeholder="' + ftCtrPlaceholder + '" multiple="multiple" >

3、初始化單選和多選下拉

獲取和綁定option值，示例：

//獲取multiselect的options
var GetOptions = function (url) {
    var ops = "";

    var data = $.ajax({
        url: url,
        async: false
    });

    if (data != null && data.responseText != null && data.responseText.length > 0) {
        var arr = $.parseJSON(data.responseText);
        $.each(arr, function (i, item) {
            ops += "<option value='" + item.VALUE + "'>&nbsp;" + item.TEXT + "</option>\r\n";
        });
    }
    return ops;
}

        注意：由於我這里需要等待添加 option，所以將ajax改為同步 async: false。若為異步，則沒等ajax數據返回，下面代碼就執行走了得不到想要 option

初始化單選或多選下拉（以下是自定義的一個方法，用於動態初始化）

//給下拉控件賦值
//ctrlName：控件名
//ftCtrValue:下拉項值-字符串,以逗號分隔
//isSingle：false=單選，true=多選
var evalMultiselect = function (ctrlName, ftCtrValue, isSingle) {
    var control = $('#' + ctrlName);

    var valArr = [];//初始化默認選中項
    if (ftCtrValue != null && ftCtrValue != "" && ftCtrValue.length > 0) {
        var valArr = ftCtrValue.toString().split(",");
    }

    //設置select的處理
    if (isSingle) {
        control.val(valArr).multipleSelect({
            placeholder: "請選擇",
            //width: '100%',
            single: true
        });//單選，加入single: true
    }
    else {
        control.val(valArr).multipleSelect();//多選，不需要single: true
    }
}

4、獲取控件值：$("#select").val();