javascript - Javascript在HTML选择上显示div

Question

我一直在使用 javascript 创建一个下拉列表，该列表根据选择的选项显示一个 div。

所有代码都可以在这里看到：

var select = document.getElementById('test'),
onChange = function(event) {
    var shown = this.options[this.selectedIndex].value == 1;
    document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};

我想知道如何简化此代码并删除重复 - 也许是某种循环？

score 1 · Accepted Answer

您不需要两个事件处理程序，您可以使用变量（如下所示）来确定哪些div需要显示或隐藏。

var select = document.getElementById('test'), onChange = function(event) {
    var div1 = 'hidden_div';
    var div2 = 'hidden_div2';

    var index1 = this.options[this.selectedIndex].value == 1;
    var index2 = this.options[this.selectedIndex].value == 2;

    if(index1 || index2){
        document.getElementById(div1).style.display = index1 ? 'block' : 'none';
        document.getElementById(div2).style.display = index2 ? 'block' : 'none';
    }
    else{
        document.getElementById(div1).style.display = 'none';
        document.getElementById(div2).style.display = 'none';
    }
};

// attach event handler
if (window.addEventListener) {
    select.addEventListener('change', onChange, false);
} else {
    // of course, IE < 9 needs special treatment
    select.attachEvent('onchange', function() {
        onChange.apply(select, arguments);
    });
}

工作小提琴

score 1 · Accepted Answer

另一个代码：

var select = document.getElementById('test'),
    nbItems = 2,
    onChange = function (event) {
        var val = this.options[this.selectedIndex].value;

        for (var i = 1; i <= nbItems; i++) {
            document.getElementById('hidden_div' + i).style.display = val == i ? 'block' : 'none';
        }
    };

http://jsfiddle.net/nmdTy/11/

score 0 · Accepted Answer

我不太确定“重复”是什么意思，但我的猜测是，您不想键入div要隐藏/显示的每个 s。
这种任务可能有多种方法。最普遍的是将divid 放在一个单独的数组中。然后，您可以隐藏除选定 div 之外的所有 div。

var divs = ["hidden_div1", "special_hidden", "one_more_hidden"];  
var select = document.getElementById('test');
var onchange = function(event) {   //Use var!
    var shown = this.options[this.selectedIndex].value;
    for(var i=0; i<window.divs.length; i++) {   //It would be more effective to save last shown div in a variable, but I've chosen this aproach with loop
        var div = document.getElementById(window.divs[i]);
        if(div!=null) {
          if(i==shown)  
            div.style.display="block";
          else
            div.style.display="none";
        }
    }
};
select.addEventListener("change", onchange);  //Could type the function right here, without using "onchange" variable

在我的代码中，<option>值表示数组中的索引。这是jsFiddle。

score 0 · Accepted Answer

在 IE<9 中委派更改事件是一件痛苦的事情。有可能，检查这个问题，看看它是如何完成的，但这不是你所说的优雅。

但是您的代码不会委托事件，因此只需将处理程序直接附加到onload事件就可以解决问题（并且它与 X 浏览器兼容）：

document.getElementById('test').onchange = function(e)
{
    e = e || window.event;//the only IE headache
    var shown = this.options[this.selectedIndex].value == 1;
    document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
    //^^ could keep a reference to this in a closure
};

完整的代码（onload对隐藏的 div 进行闭包引用并防止 ie 中的内存泄漏）应如下所示：

var winLoad = function(e)
{
    var hiddenDiv = document.getElementById('hidden_div');
    document.getElementById('test').onchange = function(e)
    {
        var shown = !!(this.option[this.selectedIndex].value == 1);//to be safe, coerce to bool
        hiddenDiv.style.display = shown ? 'block' : 'none';
    };
    if (window.addEventListener)
    {
        return window.removeEventListener('load',winLoad,false);
    }
    return window.detachEvent('onload',winLoad);
};
if (window.addEventListener)
{
    window.addEventListener('load',winLoad,false);
}
else
{
    window.attachEvent('onload',winLoad);
}

这应该在所有主要浏览器上都可以正常工作，甚至是 IE7（也可能是 IE6）

javascript - Javascript在HTML选择上显示div

4 回答 4

工作小提琴

Related

Reference