multiselect多选框实现

最新推荐文章于 2025-01-09 10:34:12 发布

凡夫俗子Z

最新推荐文章于 2025-01-09 10:34:12 发布

阅读量2.4k

点赞数

分类专栏： web前端开发

本文链接：https://blog.csdn.net/u012499210/article/details/51723118

版权

web前端开发专栏收录该内容

42 篇文章

订阅专栏

本文介绍了如何使用jQuery及其相关库实现Multiselect多选框功能，包括所需依赖文件、HTML结构以及初始化和获取选中值的方法，提供了一种高效选择多项数据的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.效果图

2.依赖文件

jquery-ui.min.js jquery.multiselect.js jquery.js jquery.multiselect.css jquery-ui.css

3.html

<select id="keywordIds" name="keywordIds" multiple="multiple"  placeholder="采集对象" class="form-control" value="dfgdfgd"   data-bind="value:'gfhgdfgf',foreach:keywordIdsOptions()">
										 	<option data-bind="value:keywordName,text:keywordName"></option>
										</select>
										<input type="hidden" id="keywordIdsData" />

4. js

$("#keywordIds").multiselect({
				    header: false,
				    height: 200,
				    minWidth: 200,
					selectedList: 100,//预设值最多显示10被选中项
				    hide: ["explode", 500],
				    noneSelectedText: '选择',
				    close: function(){
				      var values= $("#keywordIds").val();
					  $("#keywordIdsData").val(values);
					}
			    });

5. 初始化multiselect 设置默认选中值方法

$('#keywordIds option').each(function(i,content){
                    if($.inArray($.trim(content.value),d)>=0){
                       	 this.selected=true;
                         }
                     });
                     $("#keywordIds").multiselect('refresh');

6. 获取选中值得方法

$(".ui-multiselect:nth-child(2)").text().trim().split(',');