Enable/disable drop down list based on another drop down list

Question

I have 2 drop down list

<select id="servergroup" multiple="multiple">             
  <option value="P1">P1</option>
  <option value="P2">P2</option>
  <option value="P3">P3</option>
  <option value="P4">P4</option>
</select>

<select id="servername" multiple="multiple">
  <option value="s597ap233">s597ap233</option>
  <option value="s597dp392">s597dp392</option>
  <option value="s397dp095">s397dp095</option> 
</select>

I want that the second drop down list should get enabled only if we choose a value in the first drop down list. It should again get disabled if we deselect the value from the first drop down list. May I know how can this be achieved using jQuery?

Answer 1

You can use the disabled attribute and using JavaScript, you can set it as false or true

function check(){
  if(document.getElementById('servergroup').value!='')
    document.getElementById('servername').disabled=false;
  else
    document.getElementById('servername').disabled=true;
}

<select onchange="check()" id="servergroup" multiple="multiple">

    <option value="P1">P1</option>
    <option value="P2">P2</option>
    <option value="P3">P3</option>
    <option value="P4">P4</option>
    </select>
    <select disabled id="servername" multiple="multiple">
    <option value="s597ap233">s597ap233</option>
    <option value="s597dp392">s597dp392</option>
    <option value="s397dp095">s397dp095</option> 
    </select>