匹配时显示来自 select 的选项

Question

我很难在您输入匹配项时显示一些选项，而在您不输入匹配项时显示其他选项。总的来说，我是编码新手。

我只是不能让它按我想要的方式工作。

测试html:

<input class="form-control input-lg email" type="email" 
name="useremail[]" required />

<select class="form-control" name="youchoose[]" required>
<option value=""></option>

<optgroup class="groupa" label="Group A">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</optgroup>

<optgroup class="groupb" label="Group B">
<option value="option4">option4</option>
<option value="option4">option5</option>
</optgroup></select>

<br><br>
<hr>
<br>

<input class="form-control input-lg email" type="email" 
name="useremail[]" required />

<select class="form-control" name="youchoose[]" required>
<option value=""></option>
<optgroup class="groupa" label="Group A">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</optgroup>

<optgroup class="groupb" label="Group B">
<option value="option4">option4</option>
<option value="option4">option5</option>
</optgroup></select>

js:

$('.email').on("input", function(){
$("optgroup.groupa").toggle(/hotmail/ig.test(this.value) )
var _this = $(this);
if ( _this.val() == 0 )
    $('optgroup.groupa').show();
else {
    $('optgroup.groupb').hide();
    $('optgroup.' + _this.val()).show();
}
});

效果如何？我是菜鸟。
如何避免输入input1时，input2也变了？我将有很多输入，因为我是动态添加的，你可以有 1 行或大量行。
如何在输入 match/or 不匹配之前隐藏 select？我不想显示选项，因为您可以在输入框之前选择它们。

谢谢

Answer 1

How can I avoid when you input in input1, input2 changes also? I’m going to have lots of inputs since I add them dynamically and you can have 1 row or tons of rows.

你的代码没有产生这个问题，但你的两个输入是相同的，这可能与你在这里的问题有关。给你的第二个输入不同的属性，以区别于第一个。

<input class="input2" type="text" name="input2" required />

How do I keep select hidden until match/or not match is inputted? I don’t want to show options since u can pick them before you input something in the box.

下面的解决方案应该提供您需要的逻辑。这是一个非常奇怪的用例，但您描述的是根据匹配的用户输入显示或切换一组选项。

jQuery .on() 是事件处理程序。通过访问处理程序内部的 event.target.value 获取用户输入，并有条件地显示或隐藏您需要的内容。

运行下面的代码并在输入中键入“Group A”。然后，您会看到 A 组的选项出现在 select 列表中。当输入不再匹配时，这些选项将再次隐藏。我在此处检查了针对组 label 的用户输入以进行说明。您可以根据需要调整逻辑和目标元素。

<input
  class="form-control input-lg email"
  type="email"
  name="useremail[]"
  required
/>

<select class="form-control options" name="youchoose[]" required>
  <option value=""></option>
  <optgroup hidden class="groupa" label="Group A">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
  </optgroup>

  <optgroup hidden class="groupb" label="Group B">
    <option value="option4">option4</option>
    <option value="option4">option5</option>
  </optgroup>
</select>

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"
></script>
<script>
  $('.email').on('input', function (event) {
    $('optgroup').each(function () {
      console.log(event.target.value);
      if (this.label === event.target.value) {
        console.log('match');
        $(this).removeAttr('hidden');
      } else {
        $(this).attr('hidden', true);
      }
    });
  });
</script>

匹配时显示来自 select 的选项

Show options from select when match

javascript

show

toggle

hide