Javascript在HTML选择上显示div

Question

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

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

http://jsfiddle.net/nmdTy/

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';
};

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

Answer 1

另一个代码：

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/

Answer 2

您不需要两个事件处理程序，您可以使用变量（如下所示）来确定需要显示或隐藏哪个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);
    });
}

Working Fiddle

Answer 3

我不太确定“重复”是什么意思，但我的猜测是，你不想输入每个 divs 来隐藏/显示.
这种任务可能有多种方法。最通用的是将div id 放在一个单独的数组中。然后你可以隐藏除了选定的 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。

Answer 4

在 IEcheck this question to see how it's done，但这不是你所说的优雅。

但您的代码不会委托事件，因此只需将处理程序直接附加到 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 的闭包引用和 preventing memory leaks in 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）