Home » jQuery

jquery combobox select value to text input box

13 August 2012 No Comment
Share on Facebook

Problem: Need to populate text input or textbox control when user selects combobox using jQuery.

Solution: Easy solution with jQuery $(‘#combobox’).val(); on change event handler.

Lets see how to use it in code.

jquery-combobox-select

jQuery combobox select value:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery combobox select</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function(){

	$('#monthCMB').change( function(){
		 $('#monthTXT').val( $(this).val() );
	}).click( function(){
		 $('#monthTXT').val( $(this).val() );
	});

})
</script>
</head>

<body>
<select id="monthCMB">
     <option value="">Select Month</option>
     <option value="January">January</option>
     <option value="February">February</option>
     <option value="March">March</option>
     <option value="April">April</option>
     <option value="May">May</option>
     <option value="June">June</option>
     <option value="July">July</option>
     <option value="August">August</option>
     <option value="September">September</option>
     <option value="October">October</option>
     <option value="November">November</option>
     <option value="December">December</option>
</select>
<input id="monthTXT" type="text" disabled="true"/>
</body>
</html>

jquery combobox select code explanation:

on jquery ready function we have written change and click event handler for the combobox, which we want to get selected

value.

$('#monthCMB').change( function(){
		 $('#monthTXT').val( $(this).val() );
	})

Inside the change event handler this represent the combobox itself.

$(this).val(); gives the selected item value of the combobox. and we are setting the same value to textbox

$('#monthTXT').val( $(this).val() );

And finally we have written same click handler to same combobox, Which sets the value in input text box.

Conclusion: we have seen how to populate the selected value from combobox to text input box.

Keywords here:

  • jquery select box
  • jquery select option
  • jquery select value
  • jquery ui combobox

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner