小组件——select 设置多选，js取多个值

最新推荐文章于 2025-07-01 07:41:48 发布

原创最新推荐文章于 2025-07-01 07:41:48 发布 · 6.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #前端样式 #小组件

小组件总结专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用jQuery来获取HTML中带有multiple属性的select元素的选中值。通过定义一个JavaScript函数，该函数可以捕捉用户的选择，并打印出所选项目的value属性。

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

首先贴JS代码，通过jQuery获取select中的多个值

function clasp(){
	var items = new Array();
	items = $("#ventilationParameters option:selected");
    //此处取到了每个item，items[i].text则取到的是option中的文字，下面取到的是value属性
	for(var i = 0;i<items.length;i++){
		itemTitle = items[i].value;
		console.log(itemTitle);
	}
}

以下是选取多个值的select，主要是设置multiple属性即可，本段代码实现的是选择多个参数，点击按钮，获取值；

最初的想法是用onblur，失去焦点之后获取值，结果不知道什么原因，onblur方法监测不到，因此多加一个button，点击之后获取下拉列表的参数。

<div>
	<label>定制参数</label>
	<select id="ventilationParameters" selectpicker" title="请选择要设定的参数" data-dropup-auto="false"  multiple="multiple">
		<option value="1">状态</option>
		<option value="2">天气</option>
		<option value="3">风力</option>
		<option value="4">温度</option>
		<option value="5">气压</option>
	</select>
	<button onclick="clasp()">设置参数</button>
</div>