隱藏的行更改爲在下拉選項上的javascript上顯示

我想讓所有結果始終隱藏，只顯示與下拉列表中選中選項對應的結果。我有的代碼是完美的工作，但你可以看到這個代碼首先顯示了所有的結果，我似乎無法得到它隱藏所有的結果，然後只顯示一個。隱藏的行更改爲在下拉選項上的javascript上顯示

<script type="text/javascript" src="/js/jquery.js"></script> 
<script type="text/javascript"> 
    (function($) { 
     $("doucment").ready(function() { 

      $("#choice").change(function() { 
       $("td").hide(); 
       $("td." + $(this).val()).show(); 
      }); 
     }); 

    })(jQuery); 
</script> 
</head> 

<body> 
    <select id="choice"> 
     <option value="d1">A</option> 
     <option value="d2">B</option> 
     <option value="d3">C</option> 
     <option value="d4">D</option> 
    </select> 
    <table id="result" border="1"> 
     <tr> 
      <td class="d1">Column A</td> 
      <td class="d2">Column B</td> 
      <td class="d3">Column C</td> 
      <td class="d4">Column D</td> 
     </tr> 
    </table>

來源

2013-07-02 EliasPerez

你有沒有tryed調用$("doucment").ready(function() {後$("td").hide();？

這樣：

...

<script type="text/javascript"> 
    (function($) { 
     $("doucment").ready(function() { 
      $("td").hide(); 

      $("#choice").change(function() { 
       $("td").hide(); 
       $("td." + $(this).val()).show(); 
      }); 
     }); 

    })(jQuery); 
</script>

...

來源

2013-07-02 17:49:37

非常感謝你和這個作品完美非常感謝你 – EliasPerez

兩個選項：

$(doucment).ready(function() { 
    $('#result td').hide(0); 
    ...

或使用CSS：

#result td { 
    display: none; 
}

來源

2013-07-02 17:51:47 Amani

哇這是這個easyy！非常感謝你！！我需要這麼好，我有幾個小時想如何去做。再次感謝你。這解決了我的問題 – EliasPerez

隱藏的行更改爲在下拉選項上的javascript上顯示

回答

相關問題