1

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

<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>

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

4

3 回答 3

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/

于 2013-05-28T19:15:18.767 回答
0 
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';

}

于 2013-05-28T19:12:25.703 回答
0

这是我的答案，也可作为jsFiddle

虽然在这个简单的级别上有点涉及，但它演示了仅针对所涉及的元素（即 #Form1 到 #Form3）动态操作 CSS 规则的方法。

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

一个额外的静态 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>
于 2013-05-29T00:00:45.220 回答