我想： 1.根据SELECT字段隐藏和显示字段 2.根据复选框填充字段 但是两者都没有效果。两者都基于其他人的工作解决方案。我能想到的唯一区别是我使用TABLE来格式化它们。但我不知道这是否有所作为。
HTML代码：
<form method="POST">
<table cellspacing="2" cellpadding="2">
<tr>
<td valign="top" /><b>Business:</b>
<td><select id="business" name="business" >
<option value="1">Sell</option>
<option value="2">Buy</option>
<option value="3">Both</option>
<option value="4">Trade</option>
<option value="5">Freight</option>
<option value="6">Customs</option>
</select>
</td>
</tr>
<div id="freight">
<tr>
<td><b>Service Type:</b></td>
<td><select name="type">
<option value="1">Air Cargo</option>
<option value="2">Couriers</option>
<option value="3">Freight Forwarder</option>
</select>
</td>
</tr>
<tr>
<td><b>Tollfree Number:</b></td>
<td><input type="text" name="tollfree" />
</td>
</tr>
</div>
<tr>
<td valign="top"><b>Your Email Address:</b></td>
<td><input type="text" name="email" /></td>
</tr>
<div id="customs">
<tr>
<td /><b>Services:</b>
<td>
<input type="checkbox" value="ACA - Air Cargo Agent" />ACA - Air Cargo Agent<br />
<input type="checkbox" value="AFF - Air Freight Forwarder" />AFF - Air Freight Forwarder<br />
</td>
</tr>
</div>
<tr>
<td><b>Products/Services:</b></td>
<td><input type="text" name="products" /></td>
</tr>
<div id="brand">
<tr>
<td><b>Brand Names:</b></td>
<td><input type="text" name="brands" /></td>
</tr>
</div>
</table>
</form>
用于执行以下操作的jQuery代码：
$(':checkbox').click(function() {
$('input[name=products]').val(
$(':checkbox:checked').map(function() {
return $(this).val();
}).get().join(',')
);
});
$(document).ready(function () {
toggleFields();
$("#business").change(function () {
toggleFields();
});
});
function toggleFields() {
if ($("#business").val() == 1 || ($("#business").val() == 2 || ($("#business").val() == 3)
$("#brand").show();
$("#freight").hide();
$("#customs").hide();
else
if ($("#business").val() == 5)
$("#brand").hide();
$("#freight").show();
$("#customs").show();
else
if ($("#business").val() == 6)
$("#brand").hide();
$("#freight").hide();
$("#customs").show();
else
$("#brand").hide();
$("#freight").hide();
$("#customs").hide();
}
例如，当您选择＆＃34;销售＆＃34;，＆＃34;购买＆＃34;或＆＃34;两者＆＃34; （在商业中），应该隐藏SERVICE TYPE和TOLLFREE NUMBER字段，以及SERVICES字段。它们包含在DIV id＆＃34;运费＆＃34;和＆＃34;海关＆＃34;并且应该是看不见的。但他们不是。无论如何都会显示所有字段。
第二个问题是，如果您选择海关（在商业中），应该显示由复选框组成的服务字段，当单击复选框时，这些复选框中的值应该填充产品/服务字段。它也没有这样做。
以下是此代码的jsfiddle：
http://jsfiddle.net/5SArB/571/
基于两者的工作版本
jsfiddle.net/5SArB/（基于表单值切换字段）
和
jsfiddle.net/dTrVt/（根据复选框ID值填充输入字段）
我正在拉扯我的头发并且无法理解为什么它不起作用。任何帮助表示赞赏。提前谢谢。
答案 0 :(得分：1)
代码有几个问题，第一个问题是javascript编写得很糟糕。
一旦你解决了这个问题，另一个问题就是你的html表的形成。不要用div包装表行，因为这是不正确的html表结构。相反，您可以取出div，并将“id”分配给表行。基本上你要做的就是显示/隐藏表格行而不是显示/隐藏包含表格行的div。
结果HTML将是：
<tr id="freight">
...
</tr>
而不是：
<div id="freight">
<tr>
...
</tr>
</div>
这是一个fiddle，其中包含建议的更改。
希望有所帮助！
编辑：如果有人在将来遇到这个问题，那么问题就是加载顺序的一个简单问题 - 当点击事件被绑定时，文档还没有准备好。解决方案就像在document.ready回调中移动click事件一样简单。
答案 1 :(得分：0)
如前所述，您有语法错误，而div的孩子不能table。
在if...else if语句中，您缺少块定义...
同时将ID分配给tr，而不是将其嵌套在div。
此外，代码可以简化为
$(':checkbox').click(function () {
$('input[name=products]').val($(':checkbox:checked').map(function () {
return $(this).val();
}).get().join(','));
});
jQuery(function ($) {
$("#business").change(toggleFields).change();
});
function toggleFields() {
var el = $('#business option:selected').data('el'),
els = el ? '#'+el.split(/,\s*/).join(', #'):'';
var $els =els? $(els).show():$();
$('.bussiness-field').not($els).hide()
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Toggle fields based on form values</h1>
<form method="POST">
<table cellspacing="2" cellpadding="2">
<tr>
<td valign="top" /><b>Business:</b>
<td>
<select id="business" name="business">
<option value="1" data-el="brand">Sell</option>
<option value="2" data-el="brand">Buy</option>
<option value="3" data-el="brand">Both</option>
<option value="4">Trade</option>
<option value="5" data-el="freight, customs">Freight</option>
<option value="6" data-el="customs">Customs</option>
</select>
</td>
</tr>
<tr id="freight" class="bussiness-field">
<td><b>Service Type:</b>
</td>
<td>
<select name="type">
<option value="1">Air Cargo</option>
<option value="2">Couriers</option>
<option value="3">Freight Forwarder</option>
</select>
</td>
</tr>
<tr>
<td><b>Tollfree Number:</b>
</td>
<td>
<input type="text" name="tollfree" />
</td>
</tr>
<tr>
<td valign="top"><b>Your Email Address:</b>
</td>
<td>
<input type="text" name="email" />
</td>
</tr>
<tr id="customs" class="bussiness-field">
<td /><b>Services:</b>
<td>
<input type="checkbox" value="ACA - Air Cargo Agent" />ACA - Air Cargo Agent
<br />
<input type="checkbox" value="AFF - Air Freight Forwarder" />AFF - Air Freight Forwarder
<br />
</td>
</tr>
<tr>
<td><b>Products/Services:</b>
</td>
<td>
<input type="text" name="products" size="40" />
</td>
</tr>
<tr id="brand" class="bussiness-field">
<td><b>Brand Names:</b>
</td>
<td>
<input type="text" name="brands" />
</td>
</tr>
</table>
</form>