выбрать текстовое поле с JQuery?

Question

Я уверен, что это очень просто, но я не могу думать, что я делаю неправильно, в любом случае у меня есть список выбора «заголовок» для моей формы, и я хочу отобразить текстовое поле, если «Другое» "выбран.

<select name="title" id="title" class="required">
    <option value="" selected="selected">- Select Title -</option>
    <option value="Ms.">Ms.</option>
    <option value="Mrs.">Mrs.</option>
    <option value="Mr.">Mr.</option>
    <option value="Dr.">Dr.</option>
    <option value="Prof.">Prof.</option>
    <option value="Rev.">Rev.</option>
    <option value="Other" onclick="showOther();">Other</option>
</select>

function showOther() {
  jQuery("#otherTitle").show();
}

Но это не работает ... текстовое поле #otherTitle скрывается с помощью jquery при загрузке страницы.

Answer 1

Я бы предложил другой подход:

$("#title").change(function() {
    if($(this).find("option:last").is(':selected')) {
        $("#otherTitle").show();
    } else {
        $("#otherTitle").hide();
    }
});

То есть, если выбран параметр последний , отобразите текстовое поле с идентификатором otherTitle.Я на самом деле использую этот метод.Надеюсь, это поможет.Конечно, ваше поле «Другое» всегда должно быть последним, чтобы это работало, плюс оно довольно удобно для многоязычных сайтов.

Answer 2

1. Используйте jQuery для привязки ваших обработчиков событий вместо атрибутов элемента "onfoo"
2. Вам лучше привязать обработчик к элементу "select", потому что есть варианты выбора опции, которые не будут включать событие "click":

(некоторый текст для стекопотока показывает блок кода ниже)

$(function() {
  $('#title').change(function() {
    if ($(this).val() == 'Other')
      $('#otherTitle').show();
    else
      $('#otherTitle').hide();
  });
});

Я бы предпочел дать параметру «Other» значение «id», а не полагаться на «value», но как угодно.

Answer 3

$(function() {    
    $('#title').change(function() {
      if (this.value === "Other") {
        $("#otherTitle").show();
      }
      else {
        $("#otherTitle").hide();
      }     
    });    
});

и Рабочая демоверсия . добавьте / измените URL, чтобы увидеть код

Answer 4

Привязать событие к вашему списку выбора, когда оно будет изменено, посмотреть на значение и скрыть / показать

$(function(){

    $("#title").change(function () {
        if ($(this).val() == 'Other') {
            $("#otherTitle").show();
        }
    });

});