Javascript 使用onchange事件时，如何简化显示/隐藏div？

我现在有一堆div和一个下拉列表，选择时使用onchange事件显示div并在onchange中隐藏它们。目前我一次显示一个div，一切都很好，但我有太多的代码。是否有任何方法可以简化我的代码

Javascript:

<script>
    function changeDiv(val)
    {
        var id = val;
        if (id == '1')
        {
            $('#div_1').css('display','table-row');
            $('#div_2').css('display','none');
            $('#div_3').css('display','none');
            $('#div_4').css('display','none');
        }
        if (id == '2')
        {
            $('#div_2').css('display','table-row');
            $('#div_1').css('display','none');
            $('#div_3').css('display','none');
            $('#div_4').css('display','none');
        }
        if (id == '3')
        {
            $('#div_3').css('display','table-row');
            $('#div_1').css('display','none');
            $('#div_2').css('display','none');
            $('#div_4').css('display','none');
        }
        if (id == '4')
        {
            $('#div_4').css('display','table-row');
            $('#div_1').css('display','none');
            $('#div_2').css('display','none');
            $('#div_3').css('display','none');
        }
    }
</script>

函数更改div（val）
{
var-id=val；
如果（id='1'）
{
$（'div_1'）.css（'display'，'table-row'）；
$（'div_2'）.css（'display'，'none'）；
$（'div_3'）.css（'display'，'none'）；
$（'div_4'）.css（'display'，'none'）；
}
如果（id='2'）
{
$（'div_2'）.css（'display'，'table-row'）；
$（'div_1'）.css（'display'，'none'）；
$（'div_3'）.css（'display'，'none'）；
$（'div_4'）.css（'display'，'none'）；
}
如果（id='3'）
{
$（'div_3'）.css（'display'，'table-row'）；
$（'div_1'）.css（'display'，'none'）；
$（'div_2'）.css（'display'，'none'）；
$（'div_4'）.css（'display'，'none'）；
}
如果（id='4'）
{
$（'div_4'）.css（'display'，'table-row'）；
$（'div_1'）.css（'display'，'none'）；
$（'div_2'）.css（'display'，'none'）；
$（'div_3'）.css（'display'，'none'）；
}
}

选择菜单

<select class="seletmenu" onChange="changDiv(this.value)">
    <option value="1">Select 1</option>
    <option value="2">Select 2</option>
    <option value="3">Select 3</option>
    <option value="4">Select 4</option>
</select>

选择1
选择2
选择3
选择4

Divs

测试选择1
测试选择2
测试选择3
测试选择4

您可以使用一个类而不是所有ID

标记：

<div id="div_1" class="toggleDiv">
<div>Testing select 1</div></div>

<div id="div_2" class="toggleDiv">
<div>Testing select 2</div></div>

<div id="div_3" class="toggleDiv">
<div>Testing select 3</div></div>

<div id="div_4" class="toggleDiv">
<div>Testing select 4</div></div>

---

Viola，完成了相同的功能，代码更少。

您可以使用一个类而不是所有ID

标记：

<div id="div_1" class="toggleDiv">
<div>Testing select 1</div></div>

<div id="div_2" class="toggleDiv">
<div>Testing select 2</div></div>

<div id="div_3" class="toggleDiv">
<div>Testing select 3</div></div>

<div id="div_4" class="toggleDiv">
<div>Testing select 4</div></div>

---

Viola，完成了相同的功能，代码更少。

作为参考，您可以按照以下方式重构代码：

function changeDiv(val) {    
    $('#div_1').css('display','none');
    $('#div_2').css('display','none');
    $('#div_3').css('display','none');
    $('#div_4').css('display','none');
    $('#div_' + val).css('display','table-row');
}

---

为供参考，您可以按如下方式重构代码：

function changeDiv(val) {    
    $('#div_1').css('display','none');
    $('#div_2').css('display','none');
    $('#div_3').css('display','none');
    $('#div_4').css('display','none');
    $('#div_' + val).css('display','table-row');
}

---

如果使用jQuery，可以将其简化为：

$('.selectmenu').change(function () {
    $('.foo').hide();
    $('#div_' + this.value).css('display', 'table-row');
})

只需在div中添加一个普通类（例如“foo”）

---

如果使用jQuery，可以将其简化为：

$('.selectmenu').change(function () {
    $('.foo').hide();
    $('#div_' + this.value).css('display', 'table-row');
})

只需在div中添加一个普通类（例如“foo”）