Question

我有这个javascript函数，允许我在单击按钮后隐藏和显示。每个按钮都有一个链接到它的div。当我点击一个按钮时，前一个按钮包含隐藏，第二个按钮显示他的包含。我喜欢用select而不是做同样的工作。我被困在那儿。请帮助我实现我的目标，我按照按钮的方式发布。忍受我。

function visibilite(id) {
    var divs = document.getElementsByTagName('div');
    for(var no=0;no<divs.length;no++){
        if(divs[ no].className=='divs')
        { 
            'divs'
            divs[ no].style.display = "none"; 
        }
}
document.getElementById(id).style.display = "block"; 


<a href="javascript:visibilite('test1');" class="btn btn-primary btn-sm"> 
 1 year
</a>
 <a href="javascript:visibilite('test2');"class="btn btn-primary btn-sm">  
 2 year 
</a>
<div id="test1" class="divs" style="display:yes">
sfssdfsdfsfsf
</div>

<div id="test2" class="divs" style="display:none">
sfssdfsdfsfsf
</div>

Answer 1

<强> Working fiddle

您可以在select标记中使用onchange，请查看以下示例。

注意：display:yes中的是display属性的valide值。

希望这有帮助。

function visibilite(_this)
{
    var id = _this.value;
    var divs = document.getElementsByTagName('div');

    for(var i=0;i<divs.length;i++){
        if(divs[i].className=='divs')
        {
          divs[i].style.display = "none"; 
        }
    }
    document.getElementById(id).style.display = "block"; 
}

<select onchange='visibilite(this)'>
    <option value='test1'>1 year</option>
    <option value='test2'>2 year</option>
</select>

<div id="test1" class="divs">First year content</div>
<br>
<div id="test2" class="divs" style="display:none">Second year content</div>

选择后显示和隐藏div包含

1 个答案: