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

点击此处查看工作样本：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

夫妻问题：

您需要将函数包装在$(function(){})中以确保DOM已准备就绪，或将其放在HTML下面（建议使用前者）。如果你不包装它（或删除它），那么在实际呈现元素之前执行脚本，导致$('#rule-type')为undefined。
你的逻辑错误（根据你的解释）。您当前的逻辑表示当选择其他而不是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/

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

3 个答案: