如何在过滤后的 html 选择字段中选择第一个选项

Question

我的代码：

<input class="form-control" id="myInput" type="text" placeholder="Search..">

<select autofocus="True" class="form-control  form-select select" id="asortyment" name="asortyment"><option value="493">Berlin</option><option value="494">Warsaw</option><option value="495">New York</option><option value="496">Moscow</option><option value="497">London</option><option value="498">Paris</option><option value="499">Wien</option></select>

脚本

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
   
    var value = $(this).val().toLowerCase();
    var asortyment_tmp = document.getElementById('asortyment');
    $("#asortyment option").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });

输入任何字母后，选择被过滤，但前一个选项不会自动更改。

我几乎尝试了所有方法。 Select 在设置 selectedIndex 后发生变化，但如果我将其设置为 0，则值更改为第一个选项，但 filter int 这种情况被忽略。

https://jsfiddle.net/Lxd51ans/3/

Answer 1

我认为最大的困惑是，通常在设置选择时，您按值进行操作（并且您在此处使用数字作为值）。 这是我对您的代码所做的修改，应该能让您走上正轨（但仍需要进行一些自定义以使其适合您的场景）。

 $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); var asortyment_tmp = document.getElementById('asortyment'); $("#asortyment option").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); }); $("#asortyment option").filter(function() { return $(this).text().toLowerCase().indexOf(value) > -1; }).prop('selected', true); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="form-control" id="myInput" type="text" placeholder="Search.."> <select autofocus="True" class="form-control form-select select" id="asortyment" name="asortyment"><option value="493">Berlin</option><option value="494">Warsaw</option><option value="495">New York</option><option value="496">Moscow</option><option value="497">London</option><option value="498">Paris</option><option value="499">Wien</option></select>