Question

我搜索了高低，仍然无法解决这个问题。我正在创建一个引导表单的网络，我有一个名为Referral的下拉字段，可选择Internet，Friend等。

如果他们选择朋友，我希望桌面行显示在名为朋友姓名的下方，他们可以输入他们朋友的名字。如果选择了其他内容，则会隐藏此内容。

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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>

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

1 个答案: