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" }
?>