多选下拉框 jquery.multiple.select的使用

时间:2024-03-05 16:00:46

介绍:多选下拉选择插件是jQuery插件选择复选框,多元素的。有单选、多选还有其他分组多选、过滤条件选择等等。

相关API及demo:http://wenzhixin.net.cn/p/multiple-select/docs/#multiple-select

以下是项目中曾用的demo:

1.首先引用jquery.multiple.select.js、multiple-select.css

2.在页面select下拉列表里面加一个multiple="multiple"

 <select name="nimbusHost" id="nimbusHost" multiple="multiple">
          <c:forEach items="${stormIps}" var="item">
          <option value="${item.value}">${item.code}</option>
          </c:forEach>
</select>

3.在页面初始化的时候,要在js里面加一段代码:

<%--这个是默认选中的--%>
var numbusIps=\'${queryStormBaseConfInfo.nimbusHost}\';
    $(\'#nimbusHost\').multipleSelect({
        width: \'300px\',
        single:true//单选,去掉single就是多选
    }).multipleSelect(\'setSelects\',[numbusIps]);

<%--这个是默认不选中的--%>
var numbusIps=\'${queryStormBaseConfInfo.nimbusHost}\';
    $(\'#nimbusHost\').multipleSelect({
        width: \'300px\',
        single:true//单选,去掉single就是多选
    });

 4.提交的时候直接用var nimbusHost=$("#nimbusHost").val();就可以得到多选下拉框选中的值。