从多选(multiple)的select中得到所选结果

最新推荐文章于 2021-09-04 14:56:39 发布

菠菜面

最新推荐文章于 2021-09-04 14:56:39 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/zhpengfei0915/article/details/10330211

JavaScript 专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了在网页表单中实现多选题目的处理方法，包括使用JavaScript进行数据收集和通过数组处理多选数据的技术。同时，还对比了使用隐藏字段与数组方法的区别，确保提交的数据正确性。

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

<select name="classid" multiple>
<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>
</select>
类似代码，选中几个后，提交，处理页只能接收到你选择的最后一个选项：（

我整理了两种方法。
第一种方法：js处理

<script type="text/javascript">
function checkform(oThis)
{
var oData = oThis.classid.options;
for(var i=0;i<oData.length;i++){
if(oData[i].selected) oThis.arrclass.value += oData[i].value + ",";
}
alert(oThis.arrclass.value);
return true;
}
</script>

<form action="?action=saveedit" method="post" onsubmit="checkform(this)">
<select name="classid" multiple>
<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>
</select>
<input type="hidden" name="arrclass" value="">
</form>

加了一个隐藏的字段，用于接收多选的实现value值，然后提交。
比如选中3,5,6选项，点提交后，弹出3,5,6，表示提交过去的数据是正确的。

第二种方法：用数组
方法较简单，只是需要在接收页面做些处理。
把select那句改成：<select name="classid[]" multiple>即可。
选中3,5,6选项，此时接收页面
print_r($_POST['classid']);
echo implode(",",$_POST['arrclass']);
分别输出：
Array ( [0] => 3 [1] => 5 [2] => 6 )
和
3,5,6

呵呵，成功！