如何根据下拉选择有条件地显示表格行？

Question

我搜寻了高低，但仍然无法弄清楚。 我正在创建一个引导表单的网站，并且有一个名为Referral的下拉字段，可以选择Internet，Friend等。

如果他们选择“朋友”，我希望在“朋友名称”下面显示一个表格行，他们可以在其中输入朋友的名字。 如果选择了其他选项，它将被隐藏。

请参阅下面的代码。 谢谢！

 <span style="font-family: arial, helvetica, sans-serif;">Referral: <span class="required" style="color: #ff0000;">*</span></span></td> <td style="font-size: 12px; font-weight: normal;" width="35%"> <span style="font-family: arial, helvetica, sans-serif;"> <select id="referral_c" name="referral_c" tabindex="1" onchange="show_referral();"> <option selected="selected" value="Internet">Internet</option> <option value="Friend" id="friend_click">Friend</option> <tr> <td style="text-align: left; font-size: 12px; font-weight: normal;" width="15%"> <span style="font-family: arial, helvetica, sans-serif;">Friend Name: <span class="friend" style="color: #ff0000;"></span></span></td> <td style="font-size: 12px; font-weight: normal;" width="35%"> <span class="friend" style="font-family: arial, helvetica, sans-serif;"> <input id="friend_name_c" type="text" name="friend_name_c" /></span></td> </tr> 

 function show_referral(){ var referral = document.getElementById("referral_c"); var referral_text = referral.options[referral.selectedIndex].text; $("#friend_click").click(function () { $(".friend").show(); }); } 

Answer 1

首先，如果我不建议将样式放在单独的css文件中，那我会很失落。 尽可能地，一种可能的解决方案是：

 <table> <tr> <td> <span style="font-family: arial, helvetica, sans-serif;">Referral: <span class="required" style="color: #ff0000;">*</span></span> </td> <td style="font-size: 12px; font-weight: normal;" width="35%"> <span style="font-family: arial, helvetica, sans-serif;"> <select id="referral_c" name="referral_c" tabindex="1" onchange="show_referral();" > <option selected="selected" value="Internet">Internet</option> <option value="Friend" id="friend_click">Friend</option> </select> </span> </td> </tr> <tr id="friend_row" style="display: none;"> <td style="text-align: left; font-size: 12px; font-weight: normal;" width="15%"> <span class="friend" style="font-family: arial, helvetica, sans-serif;">Friend Name: <span class="friend" style="color: #ff0000;"></span></span> </td> <td style="font-size: 12px; font-weight: normal;" width="35%"> <span class="friend" style="font-family: arial, helvetica, sans-serif;"> <input id="friend_name_c" type="text" name="friend_name_c" /></span> </td> </tr> </table> 

 function show_referral() { var referral = document.getElementById("referral_c"); var referral_text = referral.options[referral.selectedIndex].text; if (referral_text === "Friend") { $("#friend_row").show(); } else { $("#friend_row").hide(); } } 

更新：完整的工作页面

 <html> <head> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> </head> <body> <table> <tr> <td> <span style="font-family: arial, helvetica, sans-serif;">Referral: <span class="required" style="color: #ff0000;">*</span></span> </td> <td style="font-size: 12px; font-weight: normal;" width="35%"> <span style="font-family: arial, helvetica, sans-serif;"> <select id="referral_c" name="referral_c" tabindex="1" onchange="show_referral();" > <option selected="selected" value="Internet">Internet</option> <option value="Friend" id="friend_click">Friend</option> </select> </span> </td> </tr> <tr id="friend_row" style="display: none;"> <td style="text-align: left; font-size: 12px; font-weight: normal;" width="15%"> <span class="friend" style="font-family: arial, helvetica, sans-serif;">Friend Name: <span class="friend" style="color: #ff0000;"></span></span> </td> <td style="font-size: 12px; font-weight: normal;" width="35%"> <span class="friend" style="font-family: arial, helvetica, sans-serif;"> <input id="friend_name_c" type="text" name="friend_name_c" /></span> </td> </tr> </table> <script type="text/javascript"> function show_referral() { var referral = document.getElementById( "referral_c" ); var referral_text = referral.options[referral.selectedIndex].text; if (referral_text === "Friend") { $( "#friend_row" ).show(); } else { $( "#friend_row" ).hide(); } } </script> </body> </html>