码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-08-09 19:59:43      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:multiple   处理   详细   www   默认   color   post   title   else   

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

初始化单选或多选下拉(以下是自定义的一个方法,用于动态初始化)

//给下拉控件赋值
//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下拉控件使用

标签:multiple   处理   详细   www   默认   color   post   title   else   

原文地址:http://www.cnblogs.com/senyier/p/7327234.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!