下拉框多选实现 jquery-multiselect 并获取选中的值

最新推荐文章于 2025-06-30 09:23:18 发布

原创最新推荐文章于 2025-06-30 09:23:18 发布 · 2.1w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript

js jquery 下拉框专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个基于jQuery的多选下拉框插件使用示例，包括引入必要的JS和CSS文件，设置多选框样式及交互行为，并通过自定义函数获取已选择的选项值。

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

<code=html><link rel="stylesheet" type="text/css" href="jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<script type="text/javascript" src="jquery.1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

首选引入js文件

<code=html>

<select id="example" name="example" multiple="multiple" style="width:400px" onchange="showValues()">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
</select>
<input type="text" id="hfexample" />

</code>

下拉列表

$(function(){
$("#example").multiselect({
height: 200,
minWidth: 200,
noneSelectedText: "==请选择==",
checkAllText: "全选",
uncheckAllText: '全不选',
selectedList: 10,
});
});

//获取选中下拉项的值
function showValues() {
var array_of_checked_values = $("select").multiselect("getChecked").map(function(){
return this.value;
}).get();
$("#hfexample").val(array_of_checked_values);
4 }
</script>