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

Question

I have five (5) individual dropdown lists on my web page.

1. cities
2. iptypes
3. purposes
4. billings
5. 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

Answer 1

Make a mutual exclusive validation easily by Ketchup plugin .

You can see the sample in demo for CheckBox es.

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.

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

Assuming your drop downs has class called mySelects,

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