multiple dropdown lists validation using javascript/jquery

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 drop开发者_JAVA技巧downs ] to proceed next

Make a mutual exclusive validation easily by Ketchup plugin.

You can see the sample in demo for 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.

Assuming your drop downs has class called mySelects,

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

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