How to define selected value for jQuery UI combobox?

Question

Here is the code - http://jsfiddle.net/and7ey/k2J5v/8/. Once button is pressed, default value (value="0") should be chosen there.

I've tried

$("#cbCity").val("0"); // cbCity - combobox

But it doesn't work. Looks like I also need to change the value of input element.

Such change should not call select.

Upd. I've also tried to do the following:

$("#cbCity").html('<option value="0" selected>Any city</option>');
$("#cbCity").val("0");

It doesn't work.

Answer 1

Here's your huckleberry.

What was done:

• Moved your code from the _create to the page. This way users don't have to wait for the data every time they click. The code happens once on page load and that's it. You may want to move this to a DOM Ready.
• Made the original select hidden by default so you don't see the jarring change of style to the ui.combobox.
• Changed how your ui.combobox items were laid out so that "Any City" is at the top.
• When you click #showAnyCity then both the custom cb and the original cb both reset. The combo selection menu is closed as well (in case it was open).

Happy Coding

Answer 2

Ok so I think there are two things going on:

1. You're not wireing up the click event to the correct object. You had $("#toggle").click() but you really want $("#showAnyCity").click()
2. When you change the select list item and your AJAX call comes back, you are not re-adding the 'Any city' and 'Other city' options. If there isn't an option with a value of "0", than .val("0") won't do anything. You either need to add them server side in the results that get sent back in the AJAX call or add them to the select list in the JavaScipt.

Answer 3

This is what you want I think so!

Now I have done with jquery UI combobox as you need it.

You need to add a function as mentioned below

autocomplete : function(value) {
    this.element.val(value);
    this.input.val(value);
}

And you need to call like this

$('#cbCity').combobox('autocomplete', 'Any city'); 

I have updated with this new one check out this:

http://jsfiddle.net/Fa9Hs/62/