jQuery - Сравните входные данные с существующими опциями optgroup выбора

Question

Я пытаюсь перебрать параметры в форме. Они разделены на группы optgroups, которые, я думаю, там, где у меня возникла проблема, я просто не могу найти правильный синтаксис.

Цель состоит в том, чтобы сравнить .val(), введенный с .text() опциями в списке. Если есть совпадение, поменяйте текст красным, если нет, поверните его зеленым.

Если я вводил неверный идентификатор вместо sreportname здесь: $("#sreportname option"), тогда текст всегда становится зеленым. с sreportname вошел, ничего не происходит. Я в недоумении.

здесь моя форма:

<form> 
    <select name="sreportname" id="sreportname" class="form-control"> 
     <option value="zrxqy">--Choose a Report--</option> 
     <option value="newReport">--Create a New Report--</option> 
     <optgroup label="General Reports"> 
      <option>Abandoned Mines</option> 
     </optgroup> 
     <optgroup label="TPS Reports"> 
      <option>Farm</option> 
      <option>Store</option> 
      <option>Chicken Coops</option> 
     </optgroup> 
    </select> 
    <input type="text" id="newReportName" name="newReportName"> 
</form> 

и вот JQuery:

$(document).ready(function() { 
    var exists = false; 
    $("#newReportName").keyup(function() { 
     $("#sreportname option").each(function() { 
      if ($(this).text() == content) { 
       exists = true; 
       return false; 
      } 
     }); 
     if(exists) { 
      $(this).css("color", "red"); 
     } else { 
      $(this).css("color", "green"); 
     } 
    }); 
}); 

Я создал fiddle. Есть идеи?

Answer 1

Вы близко. Вам просто нужно получить переменную content от newReportName. Кроме того, перемещение exists внутри функции keyup:

$("#newReportName").keyup(function() { 
 
    var exists = false; 
 
    var content= $(this).val(); 
 
    $("#sreportname option").each(function() { 
 
    if ($(this).text() == content) { 
 
     exists = true; 
 
     return false; 
 
    } 
 
    }); 
 
    if(exists) { 
 
    $(this).css("color", "red"); 
 
    } else { 
 
    $(this).css("color", "green"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <select name="sreportname" id="sreportname" class="form-control"> 
 
     <option value="zrxqy">--Choose a Report--</option> 
 
     <option value="newReport">--Create a New Report--</option> 
 
     <optgroup label="General Reports"> 
 
      <option>Abandoned Mines</option> 
 
     </optgroup> 
 
     <optgroup label="TPS Reports"> 
 
      <option>Farm</option> 
 
      <option>Store</option> 
 
      <option>Chicken Coops</option> 
 
     </optgroup> 
 
    </select> 
 
    <input type="text" id="newReportName" name="newReportName"> 
 
</form>