1

次のような 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 に答える