JQuery combobox: standard script to catch selected combobox value not working

Question

I am using the jqueryui combobox example at http://jqueryui.com/demos/autocomplete/combobox.html

I added a script as shown below to catch the selected combobox value:

<div id="selectedOpt"> </div> <script> $(document).ready(function() { $("#combobox").change(function() { var retval = $(this).val(); $("#selectedOpt").html("retval=" + retval); }); }); </script> 

However, it does not work properly:

• div selectedOpt does not display the selected combobox value every time a change event occurs.
• If you select "show base effect" (try the url above ), a standard drop-down list appears. When trying to change the value of this drop-down list, then the selectedOpt div is able to show the value correctly.

The goal is to show the div selectedOpt combobox option. Please inform, please, why (1) does not work while it works (2).

PS: all necessary js, css are correctly included. Thank you for your attention.

SOLUTION FOUND: http://robertmarkbramprogrammer.blogspot.com/2010/09/event-handling-with-jquery-autocomplete.html

Answer 1

Please modify your script according to the code below:

 <script> function test() { var retval = $("[id *=dropdown] :selected").val(); $("#selectedOpt").html("retval=" + retval); } </script> 

And name this script from the server side as follows:

 dropdown.Attributes.Add("onchange","javascript: return test();") 

Answer 2

To show the label or value of the combobox in your div, you must include your function as an option. Something like that:

 $( ".selector" ).autocomplete({ change: function(event, ui) { $("#selectedOpt").html("retval=" + ui.item.value); } }); 

Use ui.item.label if you want to use a shortcut.