Change jquerUI Combobox Selected option

Question

I want to select a value from combobox jqueryUI but it doesn't work how can I do That???I want To check if txtId HiddenField have value:change selected value of combobox.I write this way:

if($("#txtId").val())
{
  //change selected combobox value with textId value
}

This is my script and html(I remove style for not confusing)

<script>
    (function ($) {

        $.widget("custom.combobox_with_optgroup", {
            _create: function () {
                $.extend($.ui.menu.prototype.options, {
                    items: "> :not(.aureltime-autocomplete-category)"
                });
                this.wrapper = $("<span>")
                    .addClass("aureltime-combobox")
                    .insertAfter(this.element);
                this.element.hide();
                this._createAutocomplete();
                this._createShowAllButton();
            },
            _createAutocomplete: function () {
                var selected = this.element.find(":selected"),
                    value = selected.val() ? selected.text() : "";
                this.input = $("<input>")
                    .appendTo(this.wrapper)
                    .val(value)
                    .attr("title", "")
                    .addClass("aureltime-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
                    .autocomplete({
                        delay: 300,
                        autoFocus: true,
                        minLength: 0,
                        source: $.proxy(this, "_source")
                    })
                    .tooltip({
                        tooltipClass: "ui-state-highlight"
                    });

                this._on(this.input, {
                    autocompleteselect: function (event, ui) {
                        //event . preventDefault() ;
                        ui.item.value = ui.item.labelOriginal;
                        //alert( ui.item.option.value + " " + ui.item.option.labelOriginal );
                        ui.item.option.selected = true;
                        this._trigger("select", event, {
                            item: ui.item.option
                        });
                    },
                    autocompletefocus: function (event, ui) {
                        ui.item.value = ui.item.labelOriginal;
                    },
                    autocompletechange: "_removeIfInvalid"
                });


                this.input.data("ui-autocomplete")._renderMenu = function (ul, items) {
                    var self = this,
                        currentCategory = "";
                    $.each(items, function (index, item) {
                        if (item.category != currentCategory) {
                            if (item.category) {
                                ul.append("<li class='aureltime-autocomplete-category'>" + item.category + "</li>");
                            }
                            currentCategory = item.category;
                        }
                        self._renderItemData(ul, item);
                    });
                };

                this.input.data("ui-autocomplete")._renderItem = function (ul, item) {
                    var attr = { class: item.class };
                    if (item.title) attr.title = item.title;

                    return $("<li>", attr).html(item.label).appendTo(ul);
                };

            },


            _createShowAllButton: function () {
                var input = this.input,
                    wasOpen = false;

                $("<a>", { tabIndex: -1, title: "انتخاب نمایید" })
                    .tooltip()
                    .appendTo(this.wrapper)
                    .button({
                        icons: {
                            primary: "ui-icon-triangle-1-s"
                        },
                        text: false
                    })
                    .removeClass("ui-corner-all")
                    .addClass("aureltime-combobox-toggle ui-corner-right")
                    .mousedown(function () {
                        wasOpen = input.autocomplete("widget").is(":visible");
                    })
                    .click(function () {
                        input.focus();

                        if (wasOpen) {
                            return;
                        }

                        input.autocomplete("search", "");
                    });

            },
            _source: function (request, response) {
                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                response(this.element.find("option").map(function () {
                    var $this = $(this),
                        text = $this.text(),
                        category = $this.closest("optgroup").attr("label") || "",
                        regexTerm = $.ui.autocomplete.escapeRegex(request.term);

                    if (this.value && (!request.term || matcher.test(text) || matcher.test(category))) {
                        var retour =
                            {
                                labelOriginal: text,
                                label: !request.term ? text : text.replace(
                            new RegExp(
                            "(?![^&;]+;)(?!<[^<>]*)(" +
                            regexTerm +
                            ")(?![^<>]*>)(?![^&;]+;)", "gi"
                            ), "<strong>$1</strong>"),
                                value: this.value,
                                class: $this.attr("class"),
                                option: this,
                                category: category.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + regexTerm + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>")
                            };

                        var title = $this.attr("title");
                        if (title) retour.title = title;

                        return retour;
                    }
                }));
            },
            _removeIfInvalid: function (event, ui) {

                if (ui.item) {
                    //alert( ui.item.labelOriginal + " found" );
                    return;
                }

                //alert("ear");

                var value = this.input.val(),
                    valueLowerCase = value.toLowerCase(),
                    //matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i"),
                    valid = false;

                this.element.find("option").each(function () {
                    //if ($(this).text().match(matcher)) {
                    if ($(this).text().toLowerCase() === valueLowerCase) {
                        this.selected = valid = true;
                        return false;
                    }
                });
                if (valid) {
                    return;
                }

                this.input
                    .val("")
                    .attr("title", value + " non trouvé")
                    .tooltip("open");

                this.element.val("");
                this._delay(function () {
                    this.input.tooltip("close").attr("title", "");
                }, 12500);
                this.input.data("ui-autocomplete").term = "";
            },
            _destroy: function () {
                this.wrapper.remove();
                this.element.show();
            }
        });


    })(jQuery);

    $(function () {
        $("#combobox").combobox_with_optgroup();
    });
</script>

 <script>
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "Tkh_Breath.aspx/GetGenders",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                $("#combobox").get(0).options.length = 0;
                $("#combobox").get(0).options[$("#combobox").get(0).options.length] = new Option("انتخاب نمایید", "");
                $.each(msg.d, function (index, item) {
                    $("#combobox").get(0).options[$("#combobox").get(0).options.length] = new Option(item.Display, item.Value);
                });

            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });

    });
</script>

'//////////////////////////////////////HTml

 <select id="combobox" name="combobox" plaholder=" " data-type="cape">
                            </select>
<asp:HiddenField ID="txtId" runat="server" />

Answer 1

just add an onChange listner to the hidden field and update the combobox value on that event.

something like this:

html:

<select id="combobox" name="combobox" plaholder=" " data-type="cape"></select>
<asp:HiddenField ID="txtId" runat="server" />

script:

$(document).ready(function(){

$("#txtId").change(function(){

//update select box value here

})

})