基于bootstrap的multiple-select下拉控件使用 - 儿时精神

时间：2024-03-05 15:57:51

基于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;
}
View Code

        注意：由于我这里需要等待添加 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();

 

相关文章