select 多选下拉框获取值

最新推荐文章于 2025-02-19 11:44:58 发布

milli236

最新推荐文章于 2025-02-19 11:44:58 发布

阅读量3.5k

点赞数

分类专栏： h5 文章标签：下拉框多选

本文链接：https://blog.youkuaiyun.com/milli236/article/details/86710945

版权

h5 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何在HTML中设置多选下拉框，并通过JavaScript进行交互，以及在表单提交时如何处理多选下拉框的数组对象值。

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

1. 设置多选：添加属性 multiple="" 或 multiple="multiple"

<select multiple="" class="chosen-select form-control" id="form-field-select-4" data-            placeholder="Choose a State..." style="/* display: none; */">
	<option value="1">111</option>
	<option value="2">222</option>
	<option value="3">333</option>
	<option value="4">444</option>
	
</select>

2.js

	$("#form-field-select-4").change(function(){
				     //要触发的事件
				  
			var items = new Array();
                        var itemTitle = new Array();

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

	});

3，多选进行表单提交，可以设置数组对象传输

<select multiple=""  id="form-field-select-4" name="selectid[]">

提交后获取的值

array(6) {
  ["title"] => string(0) ""
  ["views"] => string(0) ""
  ["selectid"] => array(2) {
    [0] => string(1) "2"
    [1] => string(1) "3"
  }
}