CODEWITHSUNDEEP
javascriptjqueryhtml
ABC
ABC

Reputation: 71

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

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?

Upvotes: 7

Views: 14705

Answers (4)

Umair Tariq
Umair Tariq

Reputation: 91

$('#bonusVoucher').prop('disabled',false);
jQuery('#bonusVoucher').selectpicker('refresh');

Use selectpicker like this and the most IMPORTANT part is this:

Note: Place your bootsrap selectpicker script after jquery script.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>

Upvotes: 1

Shreehari N
Shreehari N

Reputation: 1

First add

<option value="-1"> -Select Server Group- </option>

and 

<option value="-1"> -Select Server Name- </option>

to Your Dropdown boxes respectively.

We can achieve requested actions using JQuery as Follows:

$(document).ready(function ()
{
    //making serverName Dropdown box disabled by default.
    $('#servername').prop('disabled', true);

    $('#servergroup').change(function ()
    {
        if($(this).val == "-1")
        {
           $('#servername').val = "-1";
           $('#servername').prop('disabled', true);
        }
        else
        {   
          $('#servername').prop('disabled', false); 
        }  
    });
});

Upvotes: 0

kind user
kind user

Reputation: 41893

jQuery solution. 

function change() {
  if ($('#servergroup option:selected').length) {
    $('#servername').attr('disabled', false);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="servergroup" multiple="multiple" onchange='change()'>
    <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" disabled>
    <option value="s597ap233">s597ap233</option>
    <option value="s597dp392">s597dp392</option>
    <option value="s397dp095">s397dp095</option> 
</select>

Upvotes: 0

Sagar V
Sagar V

Reputation: 12478

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>

Upvotes: 2

Related Questions