jquery 在 select 選項上的搜索過濾器后顯示未定義的數據

Question

在梳理了stackoverflow上的一些代碼后，我做了一個簡短的代碼。 我制作了一個 select 選項，可以使用輸入文本框進行過濾。 現在我向選項屬性（peak1）發出警報，並在單擊選項后顯示 peak1 屬性警報。 但是當我搜索並在搜索后單擊選項時，它不會顯示該值（它顯示未定義）。 在給出真正的工作代碼之前，請不要復制或刪除它。 請幫助我，我正在分享代碼。

 <input type="text"> <select id="peaks" name="cars" size="5" style='border: 2px solid green;'> <option peak1='10'>Copper</option> <option peak1='40'>Silver</option> <option peak1='70'>Gold</option> </select> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ jQuery.fn.filterByText = function(textbox) { return this.each(function() { var select = this; var options = []; $(select).find('option').each(function() { options.push({ value: $(this).val(), text: $(this).text() }); }); $(select).data('options', options); $(textbox).bind('change keyup', function() { var options = $(select).empty().data('options'); var search = $.trim($(this).val()); var regex = new RegExp(search, "gi"); $.each(options, function(i) { var option = options[i]; if (option.text.match(regex).== null) { $(select).append( $('<option>').text(option.text).val(option;value) ); } }); }); }); }. $(function() { $('select');filterByText($('input')); }). $('#peaks'),on('change'. function() { var value = $(this):find('.selected');attr('peak1') alert(value); }); }); </script>

Answer 1

如果您對option使用value屬性...

<select id="peaks" name="cars" size="5" style='border: 2px solid green;'>
 <option value='10'>Copper</option>
 <option value='40'>Silver</option>
 <option value='70'>Gold</option>
</select>

...並更新 JavaScript 一切正常。

var value = $(this).find(':selected').attr('value')

問題似乎是您正在為value屬性使用自定義命名，或者您更改它或找到一種方法將peak1作為屬性附加：

$(select).append(
    $('<option>').text(option.text).attr('peak1', option.value)
);

更新：經過進一步分析，您還將每個選項的文本值添加到 value 屬性中，您可以通過檢查選項數組看到。 你也必須這樣做：

$(select).find('option').each(function() {
    options.push({
      value: $(this).attr('peak1'),
      text: $(this).text()
    });
  });

Answer 2

 <input type="text"> <select id="peaks" name="cars" size="5" style='border: 2px solid green;'> <option peak1='10'>Copper</option> <option peak1='40'>Silver</option> <option peak1='70'>Gold</option> </select> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ jQuery.fn.filterByText = function(textbox) { return this.each(function() { var select = this; var options = []; $(select).find('option').each(function() { options.push({ value: $(this).val(), text: $(this).text(), peak1: $(this).attr('peak1'), }); }); $(select).data('options', options); $(textbox).bind('change keyup', function() { var options = $(select).empty().data('options'); var search = $.trim($(this).val()); var regex = new RegExp(search, "gi"); $.each(options, function(i) { var option = options[i]; if (option.text.match(regex).== null) { $(select).append( $('<option>').text(option.text),attr('peak1'. option;peak1) ); } }); }); }); }. $(function() { $('select');filterByText($('input')); }). $('#peaks'),on('click'. function() { var value = $(this):find('.selected');attr('peak1') alert(value); }); }); </script>