Javascript скрыть и показать форму не работает

Question

Это дополнительный вопрос. Я пытаюсь скрыть поле ввода, когда раскрывающееся меню имеет значение «tid and acc». Я в недоумении, почему этот код не работает, любая помощь будет высоко ценится! Вот ссылка на jfiddle: http://jsfiddle.net/Mm7c7/

<script> 
$('#rule-type').change(function() {
       var val = $(this).val();
       if (val == 'tid and acc') {
          $('#tid-acc').show();
       }
       else {
          $('#tid-acc').hide(); 
       }
    });
</script>
<select id="rule-type">
    <option value="" selected="selected">None</option>
    <option value="tid">tid</option>
    <option value="tid and acc">tid and acc</option>
    <option value="xid">xid</option>
</select>
<input id="tid-acc">

Answer 1

Ваш скрипт оценивается до того, как ваш элемент готов. Помещение скрипта в $ (document) .ready () или после того, как на него влияет содержимое, решит проблему

http://jsfiddle.net/Wx8Jf/2

$(document).ready(function(){
    $('#rule-type').change(function() {
       var val = $(this).val();
       if (val == 'tid and acc') {
          $('#tid-acc').show();
       }
       else {
          $('#tid-acc').hide(); 
       }
    });
});

Answer 2

Пара проблем:

1. Вам нужно либо обернуть функцию в $(function(){}), чтобы убедиться, что DOM готов, либо опустить ее ниже HTML (рекомендуется первый). Если вы не оберните его (или не удалите его), то сценарий будет выполнен до того, как элементы будут фактически отображены, в результате чего $('#rule-type') будет undefined.
2. Ваша логика неверна (согласно вашему объяснению). Ваша текущая логика говорит, чтобы скрыть поле ввода, когда выбрано что-либо другое , кроме tid и acc.

Рабочая версия:

<script> 
$(function(){
$('#rule-type').change(function() {
       var val = $(this).val();
       if (val == 'tid and acc') {
          $('#tid-acc').hide();
       }
       else {
          $('#tid-acc').show(); 
       }
    });
});
</script>
<select id="rule-type">
    <option value="" selected="selected">None</option>
    <option value="tid">tid</option>
    <option value="tid and acc">tid and acc</option>
    <option value="xid">xid</option>
</select>
<input id="tid-acc" />

http://jsfiddle.net/dbrecht/QwkKf/

Answer 3

Посмотрите здесь рабочий образец: http://jsfiddle.net/Mm7c7/1/

HTML:

<select id="rule-type">
    <option value="" selected="selected">None</option>
    <option value="tid">tid</option>
    <option value="tid and acc">tid and acc</option>
    <option value="xid">xid</option>
</select>
<input id="tid-acc">

Javascript:

   $('#rule-type').change(function() {
       var val = $(this).val();
       if (val == 'tid and acc') {
          $('#tid-acc').show();
       }
       else {
          $('#tid-acc').hide(); 
       }
    });