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

介绍:多选下拉选择插件是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();就可以得到多选下拉框选中的值。

posted @ 2015-12-07 10:45  付文杰  阅读(4525)  评论(0编辑  收藏  举报