jQuery combobox: standard script to catch selected value of combobox does not work

I'm using jqueryui combobox example at http://jqueryui.com/demos/autocomplete/combobox.html

I added the script seen below to catch the selected value of combobox:

<div id="selectedOpt">
</div>
<script>
$(document).ready(function() {
    $("#co开发者_如何学Pythonmbobox").change(function() {
        var retval = $(this).val();
        $("#selectedOpt").html("retval=" + retval);
    });
});
</script>

However, it does not work as expected:

1. the div selectedOpt does not show selected value of combobox each time the change event occurs
2. If "show underlying effect" is selected (pls try at url above), a standard dropdown list appear. When trying to change value of that dropdown list, then the div selectedOpt is able to show value correctly.

The goal is to have div selectedOpt display the selected option of the combobox. Please advise and please explain why (1) does not work while (2) works.

PS: all neccessary js, css are correctly included. Thanks for your kind attention.

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

Please change your script to match the code below:

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

And call this script from the server side like this:

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

To show label or value of combobox in your div you have to include your function as an option. Something like this:

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

Use ui.item.label if you want a label instead.