javascript - 根据选择隐藏/显示div

Question

我有一个 Rails 表单，用户必须从下拉菜单中选择一个值，并根据该值显示表单元素的其余部分。

<div id="A">
a
b
c
</div>

<div id="B">
x
y
z
c
</div>

<div id="B">
w
a
q
c
</div>

当用户从选择菜单中选择值 A 时，将显示 id 为 A 的 div，并隐藏其余的 div。

问题是某些字段在不同的 div 中重复，当用户在 div A 中输入字段“a”的值时，该值会被 div B 中的空白值覆盖，尽管 div B 已隐藏在 View 中。

我想知道是否可以在不同的 div 中拥有相同的字段，并且能够仅存储在显示的 div 中找到的字段的值，即使该字段在其他 div 中找到。

非常感谢您提供的任何建议。

Answer 1

当您隐藏 div 时，请为所有子项启用禁用属性，而当您显示 div 时将其删除。像这样的事情:

var showDiv = function ( id ) {
    var all = [document.getElementById( 'A' ), 
               document.getElementById( 'B' ), 
               document.getElementById( 'C' )],
        cur = document.getElementById( id ),
        inps;

    for (var i = 0, il = all.length; i < il; i++) {

        inps = all[i].getElementsByTagName('input');

        for (var j = 0, jl = inps.length; j < jl; j++) {
            inps[j].setAttribute('disabled', 'disabled');
        }

        all[i].style.display = 'none';

    }

    inps = cur.getElementsByTagName('input');

    for (j = 0, jl = inps.length; j < jl; j++) {
        inps[j].removeAttribute('disabled');
    }

    cur.style.display = 'block';
};