Question

我有一个带有一个选择字段的表单，如下所示：

<select onchange="toggle_form_element(this)" name="parts" id="parts">
    <option value="-">Please choose</option>
    <option value="0">Part 1</option>
    <option value="1">Part 2</option>
    <option value="2">Part 3</option>
</select>

在此表单下方有一些div，我想根据下拉字段中的选定选项显示/隐藏这些div。例如：

<div id="Form1">Part 1</div>
<div id="Form2">Part 2</div>
<div id="Form3">Part 3</div>

我的解决方案是使用以下js代码：

<script type="text/javascript">
    function toggle_form_element(select) {
        if (select.value == '0') {
            document.getElementById('Form1').style.display = 'block';
            document.getElementById('Form2').style.display = 'none';
            document.getElementById('Form3').style.display = 'none';
        }else if (select.value == '1') {
            document.getElementById('Form1').style.display = 'none';
            document.getElementById('Form2').style.display = 'block';
            document.getElementById('Form3').style.display = 'none';
        }else if (select.value == '2') {
            document.getElementById('Form1').style.display = 'none';
            document.getElementById('Form2').style.display = 'none';
            document.getElementById('Form3').style.display = 'block';
        }else{
            document.getElementById('Form1').style.display = 'none';
            document.getElementById('Form2').style.display = 'none';
            document.getElementById('Form3').style.display = 'none';
        }
    }
</script>

现在我想知道是否有办法让它更短更简单！？因为我必须在选择字段中添加更多选项。

Answer 1

你可以这样做：

function toggle_form_element(select) {
    var divSelect = select.value;
    var elements = document.getElementsByTagName("div");

    for (var i = 0; i < elements.length; i++) {
        if (i == divSelect) {
            elements[i].style.display = "block";
        } else {
            elements[i].style.display = "none";
        }
    }
}

演示：http://jsfiddle.net/ZRhvx/

Answer 2

function toggle_form_element(select) {
    document.getElementById('Form1').style.display = 'none';
    document.getElementById('Form2').style.display = 'none';
    document.getElementById('Form3').style.display = 'none';
    //only for your example    
    document.getElementById('Form'+(parseInt(selected.value)+1)).style.display = 'block';

}

Answer 3

以下是我的回答，也可以jsFiddle

的形式提供

虽然它涉及这个简单的层次，但它演示了动态操作CSS规则的方法，仅涉及所涉及的元素，即＃Form1到＃Form3。

随着复杂性的增加，这可能会更好地扩展。

另一个静态CSS规则设置一个封闭的div，不显示内容和子项。

<强> CSS

#hidingForms * {
    display:none;
}

<强> HTML + JS

<script type="text/javascript">
    function toggle_form_element(select) {
        var lastStyleSheet, r, lastRule, myRule;
        myRule = '#' + select.value + ' { display: block; }';
        ss = document.styleSheets;
        if (ss.length > 0) {
            lastStyleSheet = ss[ss.length - 1];
            r = lastStyleSheet.cssRules;
            if (r.length > 0) {
                lastRule = r[r.length - 1];
                // debugger;
                if (lastRule && lastRule.cssText.match(/#Form/)) {
                    lastStyleSheet.deleteRule(lastStyleSheet.cssRules.length - 1);
                }
                if (select.value !== '-') {
                    lastStyleSheet.insertRule(myRule, lastStyleSheet.cssRules.length);
                }
                // console.dir(lastStyleSheet.rules);
            }
        }
    }
</script>
<select onchange="toggle_form_element(this)" name="parts" id="parts">
    <option value="-">Please choose</option>
    <option value="Form1">Part 1</option>
    <option value="Form2">Part 2</option>
    <option value="Form3">Part 3</option>
</select>
<div id="hidingForms">
    <div id="Form1">Part 1</div>
    <div id="Form2">Part 2</div>
    <div id="Form3">Part 3</div>
</div>

JS显示：无/阻止通过下拉列表

3 个答案: