天天看点

select标签设置multiple属性,如何获取值

select标签通过设置multiple属性和size属性,就可以实现多选,且从下拉框变成了列表框。

然而 用form提交时只能得到最后一个被选中的,然后我就临时记录了这点代码,

可能对我或者他人有点作用

上代码 text.html:

<form action="post.php" method="post">
	选择年份<br>
	<select id="years" name="years">
		<option value="2017"> 2017</option>
		<option value="v2018">2018</option>	
	</select>
	<br>
	选择喜欢的月份<br>
	<select id="month" name="month" multiple="multiple" size="12" onchange ="changeMonth()">
		<optgroup label="月份">
			<option value="1"> 1</option>
			<option value="2"> 2</option>
			<option value="3"> 3</option>
			<option value="4"> 4</option>
			<option value="5"> 5</option>
			<option value="6"> 6</option>
			<option value="7"> 7</option>
			<option value="8"> 8</option>
			<option value="9"> 9</option>
			<option value="10"> 10</option>
			<option value="11"> 11</option>
			<option value="12"> 12</option>
		</optgroup>
	</select>
	<br>
	<input type="hidden" name="selectMonth" id="selectMonth" value="">
	<button type="submit"><b>提交</b></button><br />
</form>




<script type="text/javascript">
	function changeMonth() {
		var month=[];
		var obj = document.getElementById("month");
		for(var i=0;i<obj.options.length;i++){
			if(obj.options[i].selected){
			month.push(obj.options[i].value);// 收集选中项
			}
		}
		var selectMonth = document.getElementById("selectMonth"); 
		console.log(selectMonth);
		selectMonth.value = month;
	}
</script>
           

点击提交时 post.php

<?php  
	var_dump($_POST);
	//array(3) { ["years"]=> string(4) "2017" ["month"]=> string(1) "4" ["selectMonth"]=> string(3) "3,4" }
?>