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

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

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

时间: 08-06

基于bootstrap的multiple-select下拉控件使用的相关文章

使用谷歌提供的SwipeRefreshLayout下拉控件,并自定义实现下拉加载的功能

package com.loaderman.swiperefreshdemo; import android.os.Bundle; import android.os.Handler; import android.support.v4.widget.SwipeRefreshLayout; import android.support.v7.app.AppCompatActivity; import android.view.Gravity; import android.view.View;

DevExpress控件GridView挂下拉控件无法对上值

下拉控件使用RepositoryItemLookUpEdit,加入如下事件进行处理. repositoryItemLookUpEdit1.CustomDisplayText += new DevExpress.XtraEditors.Controls.CustomDisplayTextEventHandler(repositoryItemLookUpEdit1_CustomDisplayText);

解决easyUI下拉控件无法触发onkeydown事件

实现在combotree下拉控件中按Backspace键清除combotree选中的值 下面的代码无法获取到键盘事件 <input class="easyui-combotree" id="tt" name="tt" onkeydown="if(event.keyCode==8) clear()"/> 原因是easyUI重新定义了键盘事件,解决如下: $("#tt").combotree({ u

一款基于jQuery的联动Select下拉框

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. 在线预览   源码下载 实现的代码. html代码: <div class="wrap"> <div class="nice-select" name="nice-select&

下拉框、下拉控件之Select2。自动补全的使用

参考链接: 参考一:https://blog.csdn.net/weixin_36146275/article/details/79336158 参考二:https://www.cnblogs.com/wangchuanqi/p/5981212.html 参考三:https://www.cnblogs.com/sharpest/p/6117043.html 官网:https://select2.org/ 1.使用插件,首先要引入别人的插件了,你可以选择离线(无网络)或者在线引用的(如果有网络).

JQuery下拉控件select的操作汇总

JQuery获取和设置Select选项方法汇总如下: 获取select 先看看下面代码:缙云县外国专家局 1 $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 2 var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text 3 var checkVa

bootstrap动态调用select下拉框

html代码: <label for="classify" class="col-sm-2 control-label">填报部门:</label> <div class="col-sm-3"> <select class="selectpicker form-control" data-live-search="true" name="addid&quo

Html5下拉控件同时支持文本输入和下拉代码

有时候,下拉框不能满足我们的业务需求,还需要同时支持用户输入内容,默认的select标签是不支持用户输入的,下面我说一下原生的select如何支持用户输入,代码如下: <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div style="position:relative;"> <span style=&quo

绑定下拉控件

DataTable dt = Utility.Getrole(); DroList.DataSource = dt; DroList.DataTextField = "description"; DroList.DataValueField = "name"; DroList.DataBind(); DroList.Items.Insert(0, new ListItem("请选择", "请选择")); SetDropList