Question

我有一个select元素和一个div：

<select>
    <option value="v_1"></option>
    <option value="v_2"></option>
    <option value="v_3"></option>
</select>
<div id="div_id"></div>

如果用户选择选项3，我希望div获得display:block。如果选择了选项1或2，则div应为display:none。因此，如果您更改选择，div将显示并消失。

我可以这样做：

<option onClick="document.getElementById('div_id').style.display = 'block'">

但如果我有很多选择，我发现这会产生令人困惑和冗余的代码。

如何定义一个“侦听”select元素中发生的事件并根据所选选项显示或隐藏div的函数？

Answer 1

对select元素/标记使用onchange事件，而不是onclick事件。

<强> HTML

<select onchange="toggle(this)">
    <option value="">-- please choose --</option>
    <option value="v_1">1</option>
    <option value="v_2">2</option>
    <option value="v_3">3</option>
</select>
<div id="div_id">Some Data</div>

JS （按值计算） JSFiddle

function toggle(el){
    var value = el.options[el.selectedIndex].value,
        div = document.getElementById('div_id');

    if (value === 'v_1' || value === 'v_2') {
        div.style.display = 'none';
    } else if (value === 'v_3') {
        div.style.display = 'block';
    }
}

JS （按索引）

function toggle(el){
    var idx = el.selectedIndex,
        div = document.getElementById('div_id');

    if (idx <= 1) {
        div.style.display = 'none';
    } else if (idx >= 2) {
        div.style.display = 'block';
    }
}

JS函数监听select元素并根据所选选项更改CSS样式？

1 个答案: