Question

我有一个包含许多选项框的用户表单，其中一个具有（onChange（））函数来隐藏/显示基于其值的一些文本输入。在添加表单中，每个东西都像魅力一样，但是当编辑预先添加的记录时，选择选项会填充（选定），这是在添加表单时选择的，我的问题在这里，当我选择要更新的记录时，我可以使用javascript基于选项框选择值隐藏/显示输入框。

可以找到我想要的例子

Answer 1

正如许多人已经提到的，如果没有给出任何示例代码，很难提供帮助。我还是试一试。

HTML：

<select id="select" onchange="toggleInputs()">
    <option value="0">Option 0</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<input type="text" class="toggleInputs" placeholder="Input 0" id="inp0"/>
<input type="text" class="toggleInputs" placeholder="Input 1" id="inp1"/>
<input type="text" class="toggleInputs" placeholder="Input 2" id="inp2"/>
<input type="text" class="toggleInputs" placeholder="Input 3" id="inp3"/>

JS：

function toggleInputs() {
    // value of select field
    var x = document.getElementById("select").value;

    // ID of targeted input field to hide
    var targetInput = "inp"+x;

    // get all input fields and the amount of them
    var inputFields = document.getElementsByClassName("toggleInputs");
    var ln = inputFields.length;

    // show all input fields (by resetting the style)
    for (var i=0; i<ln; i++) {
        inputFields[i].setAttribute("style", "");
    }

    // hide the targeted input field
    document.getElementById(targetInput).setAttribute("style", "display: none");
}

如果您有多个选择，您还应该对HTML元素进行分组。

HTML：

<select id="select1" onchange="toggleInputs('select1', 'grp1')">
    <option value="0">Option 0</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<div id="grp1">
    <input type="text" class="toggleInputs" placeholder="Input 0" id="grp1-0"/>
    <input type="text" class="toggleInputs" placeholder="Input 1" id="grp1-1"/>
    <input type="text" class="toggleInputs" placeholder="Input 2" id="grp1-2"/>
    <input type="text" class="toggleInputs" placeholder="Input 3" id="grp1-3"/>
</div>

<select id="select2" onchange="toggleInputs('select2', 'grp2')">
    <option value="0">Option 0</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<div id="grp2">
    <input type="text" class="toggleInputs" placeholder="Input 0" id="grp2-0"/>
    <input type="text" class="toggleInputs" placeholder="Input 1" id="grp2-1"/>
    <input type="text" class="toggleInputs" placeholder="Input 2" id="grp2-2"/>
    <input type="text" class="toggleInputs" placeholder="Input 3" id="grp2-3"/>
</div>

JS：

function toggleInputs(targetedSelect, targetedGrp) {
    // value of select field
    var x = document.getElementById(targetedSelect).value;

    // ID of targeted input field to hide
    var targetInput = targetedGrp+"-"+x;

    // get all input fields and the amount of them
    var inputFields = document.getElementsByClassName("toggleInputs");
    var ln = inputFields.length;

    // show all input fields (by resetting the style)
    for (var i=0; i<ln; i++) {
        inputFields[i].setAttribute("style", "");
    }

    // hide the targeted input field
    document.getElementById(targetInput).setAttribute("style", "display: none");
}

尚未测试多个选择和输入组的版本，但它应该完成这项工作。

使用来自更新的预选项目从Document.Ready调用onchange函数

1 个答案: