首页 > 代码库 > 基于bootstrap的multiple-select下拉控件使用

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

2024-11-22 21:04:38   202人阅读

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 =http://www.mamicode.com/ $.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=http://www.mamicode.com/‘" + item.VALUE + "‘>&nbsp;" + item.TEXT + "</option>\r\n";
        });
    }
    return ops;
}
View Code

初始化单选或多选下拉（以下是自定义的一个方法，用于动态初始化）

//给下拉控件赋值
//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();

 

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


联系
我们