Working Fiddle

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

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

Answer 1

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

另一个代码：

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 3

我不确定“重复”是什么意思，但我的猜测是，你不想输入每一个div来隐藏/显示。
这种任务可能有多种方法。最普遍的是将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

在IE＆lt; 9中委派更改事件是一件痛苦的事。有可能，check 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）

Javascript在HTML选择上显示div

4 个答案:

Working Fiddle