Question

所以我试图使“ this”正常工作，但是我认为我在某个地方犯了一个错误，使“ this”选择了每个选项而不是单个选项。

我尝试过使用“ .each”函数，然后不使用它。

这是我的jQuery代码

$('<input type="text" class="beruf-suche" placeholder="Berufsuchen"/>').insertAfter('.home-page .field_beruf label');

   var beruf_suche_option = $( '.home-page .field_beruf select option' );
   var beruf_suche_option_val = $( '.home-page .field_beruf select option' ).val();

   $('.beruf-suche').keyup(function() {

      if (this.value == beruf_suche_option_val) {
         $(beruf_suche_option).each(function() {
            $(this).show();
         });
      }
      else {
         $(beruf_suche_option).hide();
      }

   });

当我在输入文本框中键入内容时，如果出现以下情况，则应显示该选项：输入框中的文本==选项值。

Answer 1

问题是因为您要在元素集合上调用val()，因此结果将仅是 first option的值。

要解决此问题，您需要循环浏览所有选项并在该循环中执行比较。然后，您还可以通过将比较的布尔结果传递给toggle()来使循环更简洁。试试这个：

var $beruf_suche_option = $('.home-page .field_beruf select option');

$('.beruf-suche').keyup(function() {
  var beruf_suche_val = this.value.trim();
  $beruf_suche_option.each(function() {
    $(this).toggle(beruf_suche_val == this.value);
  });
});

Answer 2

您可以尝试这样的操作，并且可以根据要匹配的值，val或文本轻松地对其进行修改。

HTML：

<input type="text" class="beruf-suche" placeholder="Berufsuchen"/>

<select>
<option value="" readonly selected>Select An Option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

JS / jQuery

var beruf_suche_options = $( 'select option' );


$('.beruf-suche').keyup(function() {

   var html = beruf_suche_options.filter( function (index) {
      return (this.value ==  $(".beruf-suche").val() ||  this.value === "");
    });
    $("select").html(html);
});

如何使“此”选项正常工作？

2 个答案: