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

Question

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

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

我想验证用户是否至少要从5个下拉列表中选择其中一个[下拉列表]，然后继续

Answer 1

通过Ketchup插件轻松进行互斥验证。

您可以在演示中查看CheckBox的示例。

或者，您可以给他们分配相同的名称，然后选择他们选择的选项并检查其长度，如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
}