組合框的Onchange事件不會提示任何東西

Question

這聽起來可能是一個愚蠢的問題，但我試圖像這個過去......我不知道有多少個小時。 我在這裏有一個jquery combobox。

組合框代碼： -

<script> 
    (function($) { 
    $.widget("custom.combobox", { 
     _create: function() { 
     this.wrapper = $("<span>") 
      .addClass("custom-combobox") 
      .insertAfter(this.element); 

     this.element.hide(); 
     this._createAutocomplete(); 
     this._createShowAllButton(); 
     }, 

     _createAutocomplete: function() { 
     var selected = this.element.children(":selected"), 
      value = selected.val() ? selected.text() : ""; 

     this.input = $("<input>") 
      .appendTo(this.wrapper) 
      .val(value) 
      .attr("title", "") 
      .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") 
      .autocomplete({ 
      delay: 0, 
      minLength: 0, 
      source: $.proxy(this, "_source") 
      }) 
      .tooltip({ 
      tooltipClass: "ui-state-highlight" 
      }); 

     this._on(this.input, { 
      autocompleteselect: function(event, ui) { 
      ui.item.option.selected = true; 
      this._trigger("select", event, { 
       item: ui.item.option 
      }); 
      }, 

      autocompletechange: "_removeIfInvalid" 
     }); 
     }, 

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

     $("<a>") 
      .attr("tabIndex", -1) 
      .attr("title", "Show All Items") 
      .tooltip() 
      .appendTo(this.wrapper) 
      .button({ 
      icons: { 
       primary: "ui-icon-triangle-1-s" 
      }, 
      text: false 
      }) 
      .removeClass("ui-corner-all") 
      .addClass("custom-combobox-toggle ui-corner-right") 
      .mousedown(function() { 
      wasOpen = input.autocomplete("widget").is(":visible"); 
      }) 
      .click(function() { 
      input.focus(); 

      // Close if already visible 
      if (wasOpen) { 
       return; 
      } 

      // Pass empty string as value to search for, displaying all results 
      input.autocomplete("search", ""); 
      }); 
     }, 

     _source: function(request, response) { 
     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
     response(this.element.children("option").map(function() { 
      var text = $(this).text(); 
      if (this.value && (!request.term || matcher.test(text))) 
      return { 
       label: text, 
       value: text, 
       option: this 
      }; 
     })); 
     }, 

     _removeIfInvalid: function(event, ui) { 

     // Selected an item, nothing to do 
     if (ui.item) { 
      return; 
     } 

     // Search for a match (case-insensitive) 
     var value = this.input.val(), 
      valueLowerCase = value.toLowerCase(), 
      valid = false; 
     this.element.children("option").each(function() { 
      if ($(this).text().toLowerCase() === valueLowerCase) { 
      this.selected = valid = true; 
      return false; 
      } 
     }); 

     // Found a match, nothing to do 
     if (valid) { 
      return; 
     } 

     // Remove invalid value 
     this.input 
      .val("") 
      .attr("title", value + " didn't match any item") 
      .tooltip("open"); 
     this.element.val(""); 
     this._delay(function() { 
      this.input.tooltip("close").attr("title", ""); 
     }, 2500); 
     this.input.autocomplete("instance").term = ""; 
     }, 

     _destroy: function() { 
     this.wrapper.remove(); 
     this.element.show(); 
     } 
    }); 
    })(jQuery); 

    $(function() { 
    $("#combobox").combobox(); 
    $("#toggle").click(function() { 
     $("#combobox").toggle(); 
    }); 
    }); 
</script> 
</head> 
     <select name="combobox" id="combobox" class="combobox"> 
      <option value=""></option> 
      <?php 
       try 
       { 
       $s = $conn->query("SELECT * FROM testing2"); 
       } 
       catch(PDOException $e) 
       { 
       echo $e->getMessage(); 
       } 
       while($test = $s->fetch(PDO::FETCH_OBJ)) 
       { 
       ?> 
       <option value="<?php echo $test->indexid; ?>"><?php echo $test->v1; ?></option> 
       <?php 
       } 
       ?> 
     </select> 

我想從選定框中選擇值的價值，但我無法得到它： - 下面是我寫的代碼因爲它： -

<script type="text/javascript"> 
$('#combobox').change(function(){ 
    var val = $("#combobox").val(); 
    alert(val); 
}) 
</script> 

但是，這不會執行。我在這裏做什麼錯了？

這裏的組合框的查看源代碼： -

<select name="combobox" id="combobox" class="combobox"> 
    <option value=""></option> 
    <option value="1">value1</option> 
    <option value="2">LoValue1</option> 
</select> 

Answer 1

我想你在這裏有一些問題。 125線：

this.element.children("option").each(function() { 
    if ($(this).text().toLowerCase() === valueLowerCase) { 
    $(this).prop("selected", true); 
    valid = true; 
    return false; 
    } 
}); 

我一般會去與它非常行之有效的解決方案。所以，我會要求你使用Select2這些東西。看一看下面的代碼片段：

$(function() { 
 
    $("#akshay").select2({ 
 
    "placeholder": "someplaceholder", 
 
    "width": 200 
 
    }); 
 
}); 
 

 
$("#akshay").change(function(){ 
 
    alert($(this).val()); 
 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" /> 
 
<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script> 
 
<select name="" id="akshay"> 
 
    <option value="item-1">Value</option> 
 
    <option value="item-2">Item 2</option> 
 
    <option value="item-3">Item 3</option> 
 
    <option value="item-4">Item 4</option> 
 
    <option value="item-5">Item 5</option> 
 
    <option value="item-6">Item 6</option> 
 
    <option value="item-7">Item 7</option> 
 
    <option value="item-8">Item 8</option> 
 
    <option value="item-9">Item 9</option> 
 
    <option value="item-10">Item 10</option> 
 
    <option value="item-11">Item 11</option> 
 
    <option value="item-12">Item 12</option> 
 
    <option value="item-13">Item 13</option> 
 
    <option value="item-14">Item 14</option> 
 
    <option value="item-15">Item 15</option> 
 
</select>

Answer 2

試試這個： -

this._on(this.input, { 
     autocompleteselect: function(event, ui) { 
     var alreadySelected = ui.item.option.selected; 
     ui.item.option.selected = true; 
     this._trigger("select", event, { 
      item: ui.item.option 
     }); 
     if(!alreadySelected){ 
      $(this.element).change() 
     } 
     }, 
     autocompletechange: "_removeIfInvalid" 
    }); 

jquery.ui設定值，但不會觸發更改事件。

編輯

只是增加了一個標誌，只有觸發時，如果不同以前的值選擇的值。