使用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
}