如何根據下拉選擇有條件地顯示錶格行？

我搜索了高低，仍然無法弄清楚這一點。我正在創建一個網頁來引導表單，並且我有一個名爲「引薦」的下拉字段，可選擇互聯網，朋友等。如何根據下拉選擇有條件地顯示錶格行？

如果他們選擇朋友，我希望表格行出現在名爲Friend Name的下方他們可以輸入他們的朋友的名字。如果選擇了其他內容，則會隱藏。

請參閱下面的代碼。謝謝！

<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(){ 
 
\t var referral = document.getElementById("referral_c"); 
 
\t var referral_text = referral.options[referral.selectedIndex].text; 
 
\t 
 
\t $("#friend_click").click(function() { 
 
\t \t $(".friend").show(); 
 
\t }); 
 

 
}

來源

2015-02-05 BeeRice

首先，如果我不建議把的樣式在一個單獨的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(); 
 
    } 
 
}

UPDATE：完整的工作頁面

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

 
\t \t <script type="text/javascript"> 
 
\t \t \t function show_referral() { 
 
\t \t \t \t var referral = document.getElementById("referral_c"); 
 
\t \t \t \t var referral_text = referral.options[referral.selectedIndex].text; 
 

 
\t \t \t \t if (referral_text === "Friend") { 
 
\t \t \t \t \t $("#friend_row").show(); 
 
\t \t \t \t } else { 
 
\t \t \t \t \t $("#friend_row").hide(); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t </script> 
 
\t </body> 
 
</html>

來源

2015-02-05 19:27:58

謝謝，但它仍然無法正常工作。我認爲問題在於onchange命令。我提出了一個警告（'測試'）;在java裏面，並沒有得到任何迴應。 – BeeRice 2015-02-05 20:45:32

@BeeRice查看我的更新回答。 – 2015-02-05 21:05:13

謝謝！我終於找出問題出在頂端的src：src =「http://code.jquery.com/jquery-1.11.2.min.js」。一旦我改變它，它完美的工作。再次感謝！ – BeeRice 2015-02-05 21:31:20

如何根據下拉選擇有條件地顯示錶格行？

回答

相關問題