Показать и скрыть div содержать после выбора

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.

Вы можете использовать onchange в теге select, проверьте следующий пример.

ПРИМЕЧАНИЕ: в display:yes да не является значением valide для атрибута display.

Надеюсь, это поможет.

---

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>