Javascript 隐藏和显示表单不起作用

Question

这是一个跟进问题。当下拉菜单的值为“tid 和 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(); 
       }
    });
});