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.
<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:
$('#name').val(); or jQuery('#name').val();
2) To set dropdown value to your name ‘Jyoti’.
$('#name').val('jyoti'); or jQuery('#name').val('jyoti');
3) To set dropdown value to another name ‘Jyotiranjan’.
$('#name').val('jyotiranjan'); or jQuery('#name').val('jyotiranjan');
4) To disable jyotiloppy option in dropdown down box.
$("#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.
$("#name option[value='jyotiloppy']").attr('disbaled',false); or jQuery("#name option[value='jyotiloppy']").attr('disbaled',false);
<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>
Live Demo
Hope you enjoyed the article “how to change a dropdown box value in jquery”