Here I am going to show you some example with explanation that how to change a dropdown box value in jquery.
Suppose I have html element having select dropdown and I want to change the dropdown selected value on some change event.Also I can set dropdown value
value manually when I want or where I want.In the same I can get the selected value and its text or label value through jQuery.
So I have shown on below with some examples please check below details for working on dropdown select box.
Here I have a simple select /dropdown box having id=”name” and more number of options having values as well as labels/text.
Before doing everything your site needs contain latest jQuery plugin unless below examples won’t work.
|
1 2 3 4 5 6 7 |
<select id="name"> <option value="">--Select your name---</option> <option value="jyoti">Jyoti</option> <option value="jyotiranjan">Jyotiranjan</option> <option value="jyotiloppy">Jyotiloppy</option> <option value="loppy">Loppy</option> </select> |
1) To get slected dropdown value:
|
1 2 3 |
$('#name').val(); or jQuery('#name').val(); |
2) To set dropdown value to your name ‘Jyoti’.
|
1 2 3 |
$('#name').val('jyoti'); or jQuery('#name').val('jyoti'); |
3) To set dropdown value to another name ‘Jyotiranjan’.
|
1 2 3 |
$('#name').val('jyotiranjan'); or jQuery('#name').val('jyotiranjan'); |
4) To disable jyotiloppy option in dropdown down box.
|
1 2 3 |
$("#name option[value='jyotiloppy']").attr('disbaled',true); or jQuery("#name option[value='jyotiloppy']").attr('disbaled',true); |
5) To enable jyotiloppy option in dropdown down box.
|
1 2 3 |
$("#name option[value='jyotiloppy']").attr('disbaled',false); or jQuery("#name option[value='jyotiloppy']").attr('disbaled',false); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<html> <head> <title>Working on jQuery select and drop down box example</title> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $('#isSelected').click(function(){ alert($('#name').val()); }); $('#selectjyoti').click(function(){ $('#name').val('jyoti'); }); $('#selectloppy').click(function(){ $('#name').val('loppy'); }); $('#selectjyotiloppy').click(function(){ $('#name').val('jyotiloppy'); }); $('#disablejyotiloppy').click(function(){ //$("#name option[value='jyotiloppy']").attr("disabled","disabled"); //$("#name option[value='jyotiloppy']").attr("disabled",true); $("select option[value*='jyotiloppy']").prop('disabled',true); }); $('#enablejyotiloppy').click(function(){ $("#name option[value='jyotiloppy']").attr("disabled", false); }); }); </script> </head> <body> <div class="select_box"> <select id="name"> <option value="">--Select your name---</option> <option value="jyoti">Jyoti</option> <option value="jyotiranjan">Jyotiranjan</option> <option value="jyotiloppy">Jyotiloppy</option> <option value="loppy">Loppy</option> </select> </div> <div class="display_value"> <input type="button" value="display selected" id='isSelected'/> </div> <div class="select_value"> <input type="button" value="select jyoti" id='selectjyoti'/> <input type="button" value="select loppy" id='selectloppy'/> <input type="button" value="select jyotiloppy" id='selectjyotiloppy'/> </div> <div class="disbale_enable"> <input type="button" value="disable jyotiloppy" id='disablejyotiloppy'/> <input type="button" value="enable jyotiloppy" id='enablejyotiloppy'/> </div> </body> </html> |
