（选择>选项）使用输入值的精确文本问题和：在jquery中包含方法

Question

我的代码只包含两个元素。第一个元素是输入(#nameInput)，第二个是选择(#select)。

我的目标是检查是否有 <option> 的文本等于当前的 #nameInput 值。

请看下面的例子，如果输入中插入的文本已经存在于option，输入的边框会变成红色（addClass错误）。

但是:contains 有一个问题，因为它会找到选项文本中包含的文本，而不是我正在寻找的完全匹配。

如下例所示，有a & aaa 文本选项，但即使插入aa 或aaaa 也会出现错误（类）。

还有一个例子，它不起作用 -> my option - 仅插入 my 时出现错误。

$("#nameInput").change(function(){ 
  var t = $(this);
  var t_val = $(this).val();

  if(
    $("#select option:contains(" +  t_val + ")" ).length
  ) { 
    t.addClass("error");
  }
  else {t.removeClass("error");}
  
});

input, select {width:  50%; height: 32px;}
input.error {border: 5px solid red;}

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<input id="nameInput" type="text"/><br/><br/>
<select id="select">
  <option value="default" selected disabled>Select..</option>
  <option class="option">a</option>
  <option class="option">aaa</option>
  <option class="option">bbb</option>
  <option class="option">bbbbbb</option>
  <option class="option">my option</option>
</select>

Answer 1

使用input 事件.filter() 检查input 的.textContent 是否等于#select option 元素

$("#nameInput").on("input", function() {
  var t = $(this);
  var t_val = t.val();

  if (
    $("#select option").filter(function() {
      return this.textContent === t_val
    }).length
  ) {
    t.addClass("error");
  } else {
    t.removeClass("error");
  }

});

input,
select {
  width: 50%;
  height: 32px;
}
input.error {
  border: 5px solid red;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<input id="nameInput" type="text" />
<br/>
<br/>
<select id="select">
  <option value="default" selected disabled>Select..</option>
  <option class="option">a</option>
  <option class="option">aaa</option>
  <option class="option">bbb</option>
  <option class="option">bbbbbb</option>
  <option class="option">my option</option>
</select>

Answer 2

var arr = $('select option').map(function(index, element){
       return $(element).text()
}).get();
console.log(arr)
$("#nameInput").keyup(function() {
  var t = $(this);
  var t_val = $(this).val();



  console.log($.inArray(t_val, arr) == -1)
  if ($.inArray(t_val, arr) == -1) {
    t.removeClass("error");
  } else {
    t.addClass("error");
    
  }

});

input,
select {
  width: 50%;
  height: 32px;
}
input.error {
  border: 5px solid red;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<input id="nameInput" type="text" />
<br/>
<br/>
<select id="select">
  <option value="default" selected disabled>Select..</option>
  <option class="option">a</option>
  <option class="option">aaa</option>
  <option class="option">bbb</option>
  <option class="option">bbbbbb</option>
  <option class="option">my option</option>
</select>

1. 使用.map() 将选择选项的所有值映射到数组中

说明：将当前匹配集中的每个元素通过一个函数传递，生成一个包含返回值的新 jQuery 对象。

1. 使用$.inArray 查找当前输入值的匹配项

说明：在数组中搜索指定值并返回其索引（如果未找到则返回-1）。

1. 使用.keyup检查值

说明：将事件处理程序绑定到“keyup”JavaScript 事件，或在元素上触发该事件。

Change event

var arr = $('select option').map(function(index, element){
       return $(element).text()
}).get();
console.log(arr)
$("#nameInput").change(function() {
  var t = $(this);
  var t_val = $(this).val();



  console.log($.inArray(t_val, arr) == -1)
  if ($.inArray(t_val, arr) == -1) {
    t.removeClass("error");
  } else {
    t.addClass("error");
    
  }

});

input,
select {
  width: 50%;
  height: 32px;
}
input.error {
  border: 5px solid red;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<input id="nameInput" type="text" />
<br/>
<br/>
<select id="select">
  <option value="default" selected disabled>Select..</option>
  <option class="option">a</option>
  <option class="option">aaa</option>
  <option class="option">bbb</option>
  <option class="option">bbbbbb</option>
  <option class="option">my option</option>
</select>