多个下拉列表使用javascript / jquery进行验证

Question

我的网页上有五（5）个单独的下拉列表。

1. 城市
2. iptypes
3. 目的
4. 帐单
5. 协议

我想验证用户必须至少选择[从5个下拉列表]中的任何一个[下拉列表]继续下一步

Answer 1

Ketchup plugin轻松进行互斥式验证。

您可以在演示中查看CheckBox es。

的示例

或者您可以为它们指定相同的名称并选择所选的选项并检查它的长度，就像VinayC所做的那样，然后显示一条消息。

Answer 2

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的：

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;
}

Answer 3

假设您的下拉类型名为mySelects，

if ($('.mySelects option:selected').length == 0)
{
  // no drop-down has selected
}