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


Click To Run

Hope you enjoyed the article “how to change a dropdown box value in jquery”

how to change a dropdown box value in jquery
Tagged on:     

Leave a Reply

Your email address will not be published. Required fields are marked *