使用 javascript/jquery 验证多个下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4568943/
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
multiple dropdown lists validation using javascript/jquery
提问by shaji
I have five (5) individual dropdown lists on my web page.
我的网页上有五 (5) 个单独的下拉列表。
- cities
- iptypes
- purposes
- billings
- protocols
- 城市
- 类型
- 目的
- 比林斯
- 协议
I want to validate that user must have at-least to select any one [ drop down list ] of them [ from 5 dropdowns ] to proceed next
我想验证用户必须至少选择其中的任何一个 [下拉列表] [从 5 个下拉列表] 以继续下一步
回答by Jahan
Make a mutual exclusive validation easily by Ketchup plugin.
通过Ketchup 插件轻松进行互斥验证。
You can see the sample in demo for CheckBoxes.
您可以在CheckBoxes 的演示中看到示例。
Or you can assign them the same name and select their selected options and check it's length, like what the VinayC did and then show a message.
或者您可以为它们分配相同的名称并选择它们选择的选项并检查其长度，就像 VinayC 所做的那样，然后显示一条消息。
回答by VinayC
Assuming your drop downs has class called mySelects,
假设你的下拉菜单有名为 mySelects 的类，
if ($('.mySelects option:selected').length == 0)
{
// no drop-down has selected
}
回答by shankhan
HTML:
HTML：
<form onsubmit='return checkvalue();'>
<p><label for='cities'>City: </label>
<select id='cities' name='cities' >
<option value=''>Please select city</option>
<option value='city1'>City 1</option>
<option value='city2'>City 2</option>
<option value='.....'>.....</option>
</select>
</p>
<p><label for='iptypes'>IP Types: </label>
<select id='iptypes' name='iptypes' >
<option value=''>Please IP Type</option>
<option value='type1'>Type 1</option>
<option value='type2'>Type 2</option>
<option value='.....'>.....</option>
</select>
</p>
<p><label for='purposes'>Purposes: </label>
<select id='purposes' name='purposes' >
<option value=''>Please select Purpose</option>
<option value='purpose1'>Purpose 1</option>
<option value='purpose2'>Purpose 2</option>
<option value='.....'>.....</option>
</select>
</p>
<p><label for='billings'>Billing: </label>
<select id='billings' name='billings' >
<option value=''>Please select billing</option>
<option value='billing1'>Billing 1</option>
<option value='billing2'>Billing 2</option>
<option value='.....'>.....</option>
</select>
</p>
<p><label for='protocols'>Protocols: </label>
<select id='protocols' name='protocols' >
<option value=''>Please select protocol</option>
<option value='protocol1'>Protocol 1</option>
<option value='protocol2'>Protocol 2</option>
<option value='.....'>.....</option>
</select>
</p>
</form>
JavaScript:
JavaScript：
function checkvalue() {
if(document.getElementById('cities').value !== '' ||
document.getElementById('iptypes').value !== '' ||
document.getElementById('purposes').value !== '' ||
document.getElementById('billings').value !== '' ||
document.getElementById('protocols').value !== ''
)
{
return true;
}
alert('Please select at least one value');
return false;
}
