使用 JavaScript 验证多选框不为空
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23463013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using JavaScript to validate a multiple select box is not empty
提问by James
I'm trying to use JavaScript to validate a multiple select box is not empty. Below is the code I use on all the other input boxes (without [] in the field name).
我正在尝试使用 JavaScript 来验证多选框不为空。下面是我在所有其他输入框上使用的代码（字段名称中没有 []）。
<script type="text/javascript">
function validateForm()
{
var x=document.forms["escalations"]["SupportGroup[]"].value;
if (x==null || x=="" || x=="---< Select Delivery Team >---")
{
alert("Please select a Support Group.");
return false;
}
}
</script>
And it works fine for single input but when I add the “[]” for multiple, it then alerts when an option is chosen or not. Any ideas? Thanks.
它适用于单个输入，但是当我为多个添加“[]”时，它会在是否选择一个选项时发出警报。有任何想法吗？谢谢。
The html code is
html代码是
<form name="escalations" onsubmit="return validateForm()" action="submitescalation.php?SM=SN" method="post" enctype="multipart/form-data">
<select id="s0" multiple="multiple" name="SupportGroup[]" onchange="GetCompany();GetTitle();GetContact();" style="height: 25px">
<option>Company1</option><option>Company2</option><option> Company3</option></select>
</form>
回答by attila
this should work to get the text of the first option item selected:
这应该可以用来获取选择的第一个选项项的文本：
var x=document.forms["escalations"]["SupportGroup[] option:selected"].eq(0).text();
or this to get the value of the first option item selected
或此以获取所选的第一个选项项的值
var x=document.forms["escalations"]["SupportGroup[] option:selected"].eq(0).val();
回答by sinisake
Maybe something like this:
也许是这样的：
function validateForm()
{
//var x=document.forms["escalations"]["SupportGroup"].value;
selects= document.getElementsByTagName('select');
for(i=0;i<selects.length;i++){
x=selects[i].value;
if (x==null || x=="" || x=="---< Select Delivery Team >---")
{
alert("Please select a Support Group.");
return false;
}
}
}
P.S. If i understand you correctly - you have more than one select box on page, with same name (and you send values as array to server side script)?
PS 如果我理解正确的话 - 您在页面上有多个选择框，名称相同（并且您将值作为数组发送到服务器端脚本）？
回答by RobG
Presumably the first option has a value of "---< Select Delivery Team >---". That really should be part of the label, not one of the options.
大概第一个选项的值为“---< Select Delivery Team >---”。这真的应该是标签的一部分，而不是选项之一。
If the first option is removed, then you can just use the selected index property to see if an option is selected. In a mulitple select, the selectedIndexwill be the index of the first selected option. Therefore, you just need to check that it's 0 or greater (it will be -1 if no option is selected):
如果删除了第一个选项，那么您可以只使用 selected index 属性来查看是否选择了某个选项。在多选中，selectedIndex将是第一个选定选项的索引。因此，您只需要检查它是否为 0 或更大（如果没有选择任何选项，它将是 -1）：
if (document.forms["escalations"]["SupportGroup[]"].selectedIndex >= 0) {
// an option other than the first has been selected
}
If you persist with using the first option as a label, then you need to do a bit more work, presumably to make sure the first isn't selected and that some other option is:
如果您坚持使用第一个选项作为标签，那么您需要做更多的工作，大概是为了确保没有选择第一个选项并且其他一些选项是：
var select = document.forms["escalations"];
var options = ["SupportGroup[]"].options;
if (select.selectedIndex > 1) {
// an option other than the first has been selected
// can end validation here
}
if (select.selectedIndex == 0) {
// The first option is selected, tell the user to not select it?
// See if any other option is selected, start from second
for (var i=1, iLen=options.length; i<iLen; i++) {
if (options[i].selected) {
// an option other than the first has been selected
}
}
}
So you can see that if you put the label in a label rather than an option, validation is much simpler.
所以你可以看到，如果你把标签放在一个标签而不是一个选项中，验证就会简单得多。
