【发布时间】：2012-09-26 19:42:03
【问题描述】：
我很难将值数组映射到不同的单选按钮。这是 HTML，我重命名了变量以使其具有通用性，而不是特定于我现在正在制作的特定 Web 表单。
<input type="radio" NAME="type" id="rbtA"><span id="txtA">Alt. A</span>
<input type="radio" NAME="type" id="rbtB"><span id="txtB">Alt. B</span>
<input type="radio" NAME="type" id="rbtC"><span id="txtC">Alt. C</span>
<input type="radio" NAME="COM" id="rbtSub1"><span id="txtSub1">SubAlt. 1</span>
<input type="radio" NAME="COM" id="rbtSub2"><span id="txtSub2">SubAlt. 2</span>
<input type="radio" NAME="COM" id="rbtSub3"><span id="txtSub3">SubAlt. 3</span>
<input type="radio" NAME="COM" id="rbtSub4"><span id="txtSub4">SubAlt. 4</span>
<input type="radio" NAME="Coupling" id="rbtSubSub1"><span id="txtSubSub1">Yes</span>
<input type="radio" NAME="Coupling" id="rbtSubSub2"><span id="txtSubSub2">No</span>
<SELECT id="selectCom" style="width: 160" NAME="Communication"><OPTION selected="selected"></OPTION></SELECT>
如果选择了备选 B 或 C，则会出现单选按钮 rbtSub1-rbtSub4。如果选择 C，则 rbtSubSub1 和 rbtSubSub2 将保持隐藏状态，但如果选择 B 和（SubAlt. 1 或 SubAlt. 2），则会出现 rbtSubSub1 和 rbtSubSub2。使这些按钮出现/消失是没有问题的，问题是根据选择的单选按钮将正确的替代项映射到选择框 selectCom。
如果 selectCom 中的替代方案仅依赖于 rbtSub1 - rbtSub4，则映射将很容易：
var arraySub1=["1A", "1B", "1C"];
//(correspondingly for sub2 and sub3)...
var arraySub4=["4A", "4B", "4C"];
var mapCom = { rbtSub1 : arraySub1, rbtSub2 : arraySub2, rbtSub3 : arraySub3, rbtSub4 : arraySub4 }
然后在 jquery 代码中的某处，我将根据用户选择的子选项来填充 selectCom（这可行，我在表单中的其他地方使用过）：
$('#rbtSub1, #rbtSub2, #rbtSub3, #rbtSub4').change(function() {
$("#selectCom option").remove();
$.each(mapCom[this.id], function(i, val) {
var opt = $("<option />");
opt.appendTo($("#selectCom")).text(val).val(val);
});
});
棘手的部分是，如果选择了 rbtB and（rbtSub1 或 rbtSub2），我需要根据用户选择 rbtSubSub1 还是 rbtSubSub2 来填充 selectCom，但是如果 rbt B 和（rbtSub3 或 rbtSub4 ) 被选中，我需要根据用户是否选择了 rbtSub3 或 rbtSub4 来填充 selectCom。此外，如果选择了 rbtC，我只想根据选择来填充 selectCom：rbtSub1、rbtSub2、rbtSub3 或 rbtSub4。
我已尝试在同一映射代码行中映射不在同一级别的单选按钮，但这会在我尝试运行表单时导致错误。
对我如何实现这一点有什么好的建议吗？
【问题讨论】：
-
经过一夜好眠和更多故障排除后，我想我已经找到了，如果不是解决我最初的问题的方法，至少是一个有效的解决方法。它并不优雅，但它确实有效。我创建了三组按钮，一个在 rbtA 被选中时可见，一个在 rbtB 被选中时可见，等等。对于用户来说，这些按钮看起来是一样的。然后我创建三个映射和三个函数来填充 selectCom，每个函数对应于三组按钮中的一组。我还没有完全实现它，我可能需要为 subsub 按钮创建第四个函数。很麻烦，但是很管用。
标签： jquery html mapping radio-button