Заполнение ввода текстового поля на основе выпадающего окна выбора в JQuery

Question

У меня есть выпадающее поле выбора и текстовое поле ввода. Выберите окно отображения мои категории и его внешний вид, как это:

<select id="category" name="category"> 
    <option value="">Please select...</option> 
    <option value="1">Category-1</option> 
    <option value="2">Category-2</option> 
    <option value="3">Category-3</option> 
    <option value="4">Other</option> 
</select> 

ввода текста, как это:

<input type="text" id="otherCategory" name="otherCategory" value="" style="display: none;"> 

Мой вопрос. когда пользователь выбирает только «Другое» из выпадающего списка, мне нужно заполнить текст ввода.

Я пробовал что-то вроде этого:

$(document).ready(function() { 

    $('#category').change(function() { 
     var myValue = $(this).val(); 
     var myText = $("#category :selected").text(); 

     if (myText != '' AND myText == "Other") { 
      $("#otherCategory").show(); 
     } 
    }); 
}); 

Но я не мог заставить его работать. Кто-нибудь может сказать, как я это понимаю.

ПРИМЕЧАНИЕ: мое раскрывающееся меню выбирает динамическое заполнение.

спасибо.

Answer 1

У вас не хватает && в if состоянии. Кроме того, ваше состояние

myText != '' является излишним и не требуется.

Идет смена input при изменении выбора.

$(document).ready(function() { 

    $('#category').on('change', function() { 
     var myValue = $(this).val(); 
     var myText = $.trim($("#category :selected").text()).toLowerCase(); // Trim spaces and convert to lowercase for comparison 

     $("#otherCategory").toggle(myText === 'other'); 
    }); 
}); 

Демо: https://jsfiddle.net/tusharj/8ykfmtyt/1/

Answer 2

Вы должны использовать && вместо AND

Live Demo

if (myText != '' && myText === "Other") { 
    $("#otherCategory").show(); 
} 

Вы можете дополнительно оптимизировать его, прячась с опцией другой, то 'другой' является selcted. Вам не нужно проверять, не является ли он пустым, когда вы сравниваете его со строкой 'other', поэтому я удалил это условие из инструкции if.

Live Demo

$('#category').change(function() { 
     $(this).find(":selected").text() === "Other" ? 
     $("#otherCategory").show() : $("#otherCategory").hide(); 
}); 

Answer 3

Попробуйте Demo, если пользователь выбирает другой вариант, показывающий поле ввода еще скрывается.

$(document).ready(function() { 

    $('#category').change(function() { 
     var myValue = $(this).val(); 
     var myText = $("#category :selected").text(); 

     if (myText == "Other") { 
      $("#otherCategory").show(); 
     } 
     else{ 
      $("#otherCategory").hide(); 
     } 
    }); 
});