JS顯示：無/通過下拉菜單阻止

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

雖然在這個簡單的層次上涉及到一點點，但它演示了僅針對涉及的元素（即＃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>