變化jquerUI ComboBox中選定選項

Question

我要選擇從組合框jQueryUI的值，但它不工作，我怎麼能做到這一點???我要檢查，如果txtId HiddenField具有價值：組合框的變化 選擇的值。我寫這篇文章的方式：

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

這是我的腳本和HTML（我刪除樣式不混淆）

<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

只需將onChange列表添加到隱藏字段並更新該事件的組合框值。

是這樣的：

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 

}) 

})