顯示/隱藏具有下拉選項的div

Question

JS相對較新，需要一些幫助以使div根據下拉選項正確隱藏/顯示。

如果dropdown ='no'，則div應該被隱藏。 如果dropdown ='yes'，則div應該顯示。 首先，我讓JS正常工作，但是一旦保存表單並重新打開它，div就會消失。 我相信我通過告訴div僅在更改時顯示JS寫錯了JS。 但是我太新了，不知道-幫助！

 $('.analysisPub').on('change', function() { if (this.value === "Yes") { $("#analysis").show(); } else { $("#analysis").hide(); } }); 

 .analysis { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>Does this publication include analysis in any form?</td> <td class="analysisPub" id="analysisPub" name="analysisPub"> <select> <option value>Yes</option> <option value>No</option> </select> </td> </tr> </table> <div id="analysis" class="analysis"> <table> <tr> <td>Test Name</td> <td>Test 1</td> <td>Test 2</td> </tr> </table> </div> 

Answer 1

您的代碼中有兩個主要錯誤。 它們如下-

1st - you were targetting the <td> rather than the <select>

2nd - your dropdown options were not having values

我已經修復了它們。 它像您在描述中提到的那樣工作。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('#dropdownAnalysis').on('change', function() { if (this.value == 'Yes') { $("#analysis").show(); } else { $("#analysis").hide(); } }); }); </script> <table> <tr> <td>Does this publication include analysis in any form?</td> <td class="analysisPub" id="analysisPub" name="analysisPub"> <select id="dropdownAnalysis"> <option value="Yes">Yes</option> <option value="No">No</option> </select> </td> </tr> </table> <div id="analysis" class="analysis"> <table> <tr> <td>Test Name</td> <td>Test 1</td> <td>Test 2</td> </tr> </table> </div>