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

Question

我的代码只包含两个元素。第一个元素是输入.hero-image-row，第二个元素是select (#nameInput)。

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

请看下面的示例，如果输入中插入的文本已存在于#nameInput输入的边框变为红色（addClass错误）。

但是option存在问题，因为它会在选项文本中找到包含我要查找的完全匹配项的文字。

如下面的示例所示，有一些选项包含文字:contains＆amp; a，但即使插入aaa或aa，也会显示错误（类）。

另一个例子，它不起作用 - ＆gt; 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;}

Answer 1

使用input事件.filter()来检查.textContent的{​​{1}}是否等于input元素

#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;
}

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>