1

我有一个将值数组映射到不同单选按钮的困难案例。这是 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和（rbtSub1 或 rbtSub2），我需要根据用户选择 rbtSubSub1 或 rbtSubSub2 来填充 selectCom，但如果选择了 rbt B 和（rbtSub3 或 rbtSub4），我需要根据用户选择填充 selectCom关于用户是否选择了 rbtSub3 或 rbtSub4。此外，如果选择了 rbtC，我只想根据选择来填充 selectCom：rbtSub1、rbtSub2、rbtSub3 或 rbtSub4。

我曾尝试在同一映射代码行中映射不在同一级别的单选按钮，但这会在我尝试运行表单时导致错误。

对我如何实现这一目标有什么好的建议吗？

4

1 回答 1

0

最好的解决方案是在 php 中...分解 html，如果选择值 X 或 X，则在其中放置一个 IF 语句 echo style="display:none"

于 2012-09-26T11:42:03.877 回答