JQuery Change not working for Select

Question

В принципе, я пытаюсь получить текст и заполнитель ввода для изменения при изменении выбора. Однако он не работает, и я не уверен, почему это не так.

<select class="form-control" name="search_type" id="search_type" style="width: 80%"> 
    <option selected id="item_name" value="item_name">Item Name</option> 
    <option id="item_creator" value="item_creator">Item Creator</option> 
</select> 

<input type="text" id="search" name="search" placeholder="Item Name..." maxlength="50" class="form-control" style="width: 100%"> 

<script> 
     $(document).ready(function() { 
      function search() { 
       $('#search').text(''); 
        $('#search').attr("placeholder", "Item Name..."); 

       if($("#search_type option:selected") == "item_name") { 
        $('#search').text(''); 
        $('#search').attr("placeholder", "Item Name..."); 
       } else if($("#search_type option:selected") == "item_creator") { 
        $('#search').text(''); 
        $('#search').attr("placeholder", "Creator Name..."); 
       } 
      } 

      $("#search_type").change(search); 
     }); 
    </script> 

Благодаря передовой

Answer 1

Вашей проблемы была в том, как вы пытались получить значение избранного:

if($("#search_type option:selected") == "item_name") { 

Должно быть:

if($("#search_type").val() == "item_name") { 

В мой сниппет ниже, я также уменьшил ваш код, чтобы вы не повторяли одни и те же вещи снова и снова, настраивая переменные на результаты запросов jQuery.

Кроме того, я воспользовался "метод цепочки" JQuery, так что вместо того, чтобы:

$('#search').text(''); 
$('#search').attr("placeholder", "Item Name..."); 

Вы можете написать:

$('#search').text('').attr("placeholder", "Item Name..."); 

 $(document).ready(function() { 
 
      var $txt = $("#txtSearch"); 
 
      var $searchType = $("#search_type"); 
 
      
 
      function search() { 
 
       
 
       $txt.text('').attr("placeholder", "Item Name..."); 
 

 
       if($searchType.val() === "item_name") { 
 
        $txt.text('').attr("placeholder", "Item Name..."); 
 
       } else if($searchType.val() === "item_creator") { 
 
        $txt.text('').attr("placeholder", "Creator Name..."); 
 
       } 
 
      } 
 

 
      $searchType.change(search); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<input type="text" id="txtSearch" name="search" placeholder="Item Name..." maxlength="50" class="form-control" style="width: 100%"> 
 

 
<select class="form-control" name="search_type" id="search_type" style="width: 80%"> 
 
    <option selected id="item_name" value="item_name">Item Name</option> 
 
    <option id="item_creator" value="item_creator">Item Creator</option> 
 
</select>

Answer 2

Tha главной проблемой является то, что $("#search_type option:selected") возвратит JQuery объект элемента DOM. Поэтому вы не можете сравнить его со строкой.

Используйте $("#search_type").val() для проверки выбранного значения. Еще лучше, так как контекст метода является элементом select, вы можете напрямую использовать this.value.

Можно также упростить способ (потому что вы повторяете много частей) в

function search() { 
    val searchEl = $('#search').val('').prop("placeholder", "Item Name..."), 
     value = this.value; 

    if(value == "item_name") { 
      searchEl.prop("placeholder", "Item Name..."); 
    } else if(value == "item_creator") { 
      searchEl.prop("placeholder", "Creator Name..."); 
    } 
}