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?
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>
$('#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>
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>
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);
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.