Сравнивая каждый из <option> с в <select> элемента с помощью JQuery

Question

Я пишу плагин для WordPress, и я запутался, как сравнивать введенные пользователем (получил от <input> элемента) к набору <option> элементов в <select> элемент.

На данный момент я делаю следующее:

$('button#test_button').click(function(event) { 
 
    event.preventDefault(); 
 

 
    // Get the text in the input box: 
 
    var input_text = $('input#input_test').text(); 
 

 
    $("#selectId > option").each(function() { 
 
    if ($(this).text() == input_text) { 
 
     alert("Alert Triggered"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id="input_test"></input> 
 

 
<select id="selectId"> 
 
    <option value="hello">Foo</option> 
 
    <option value="test">Test</option> 
 
</select> 
 

 
<button id="test_button">Click me!</button>

Однако, если вы запустите сниппет вы можете увидеть, что тревога никогда не срабатывает, но я не знаю, почему ? Я новичок в JavaScript, поэтому я не знаю никаких сложностей с языком, поэтому, вероятно, это простой запрос, но я был бы благодарен за любую помощь.

Answer 1

Чтобы получить входное значение, вам необходимо использовать метод val(). И у вас есть опечатка получения текстового содержимого тега <option>. Должно быть $(this).text(), не $(this).text

$('button#test_button').click(function(event) { 
 
    event.preventDefault(); 
 

 
    // Get the text in the input box: 
 
    var input_text = $('input#input_test').val(); 
 
    
 
    $("#selectId > option").each(function() { 
 
     if($(this).text() == input_text) 
 
     { 
 
      alert("Alert Triggered"); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id="input_test"></input> 
 

 
<select id="selectId"> 
 
    <option value="hello">Foo</option> 
 
    <option value="test">Test</option> 
 
</select> 
 

 
<button id="test_button">Click me!</button>