jQuery hide/show element зависит от html select value

Question

Я уверен, что это что-то тривиальное, даже если у меня возникла проблема со скрытием/показом элемента через jQuery depand по выбранному значению в форме html. У меня есть этот HTML:

HTML

<select name="town" id="town" onchange="otherTown()"> 
    <option value="1">New York</option> 
    <option value="2">Washington</option> 
    <option value="3">London</option> 
    <option value="4">Other</option> 
</select> 

<div id="alt_town" style="display:none;"> 
    <label for="right-label" class="right inline">Other Town</label> 
    <input type="text" id="right-label" name="alt_town"> 
</div> 

JS

function otherTown() { 
    $('#town').on('change', function() { 
     if ($(this).val() === "4") { 
      $("#alt_town").show() 
     } else { 
      $("#alt_town").hide() 
     } 
    }); 
} 

Если пользователь выбирает "Другой" вариант в выберите "Другой город" форма обнаружиться. Он работает, но только после того, как я выберет что-то еще до опции «Другой» (например, «Лондон»). Мне нужно показывать элементы, даже если «Другой» - первый выбор.

Спасибо, ребята, за помощью.

Answer 1

Проблема заключается в обработчике событий inline, вы регистрируете обработчик изменения jQuery (который переключает отображение) только в обработчике inline-события, поэтому, когда происходит первое изменение, обработчик jQuery не выполняется, поэтому ничего не происходит ,

При активации второго изменения у вас есть обработчик, зарегистрированный в предыдущем событии, который вызывается, и отображение изменяется, но вызывает вызовы нескольких обработчиков событий изменения, поскольку каждое изменение добавит новый обработчик события jQuery

Там нет необходимости для обработчика строкового

//dom ready handler 
 
jQuery(function($) { 
 
    $('#town').on('change', function() { 
 
    //use toggle for ease of use 
 
    $("#alt_town").toggle(this.value == 4) 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select name="town" id="town"> 
 
    <option value="1">New York</option> 
 
    <option value="2">Washington</option> 
 
    <option value="3">London</option> 
 
    <option value="4">Other</option> 
 
</select> 
 

 
<div id="alt_town" style="display:none;"> 
 
    <label for="right-label" class="right inline">Other Town</label> 
 
    <input type="text" id="right-label" name="alt_town"> 
 
</div>

Answer 2

Bind обработчик с помощью JQuery (так удалить onchange="otherTown()"). Затем с помощью JQuery toggle() метода:

$(function() { // shothand for document ready pseudo event, if needed 
    $('#town').on('change', function() { 
     $("#alt_town").toggle(this.value === "4"); 
    }); 
}); 

Answer 3

Вы можете использовать это:

$('#town').change(function() { 
    if($(this).val()==parseInt("4")) 
     { 
     $('#alt_town').show(); 
     }else{ 
      $('#alt_town').hide(); 
     } 
    });