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

你的腳本在您的元素準備好之前進行評估。放置腳本在$（文件）。就緒（）或內容後，它會影響會解決這個問題

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

看一看這裏工作示例：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(); 
     } 
    }); 

Answer 3

夫婦的問題：

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/