Отображение div на основе опции выбора

Question

Я пытаюсь показать div на основе выбранной опции в раскрывающемся списке. Работает с опцией 1 и 2, но когда я выбрал второй вариант, он показывает третий div.

function valueNew(ele) { 
 
    // get all div with class name 'div' 
 
    var div = document.getElementsByClassName('div'); 
 
    // iterating over them and hidding all 
 
    for(var i=0;i<div.length;i++) { 
 
    div[i].style.display = 'none' 
 
    } 
 
    // getting div which is need to show using value of selected option 
 
    div[ele.value].style.display = 'block'; 
 
} 
 

 
// trigger change event to show default div 
 
document.getElementById('sel').onchange();

<select id="sel" onChange="valueNew(this)"> 
 
    <option value="0">1</option> 
 
    <option vlaue="1">2</option> 
 
    <option value="2">3</option> 
 
</select> 
 

 
<div class="div" style="background:#ddd;width:100%; height:500px; display:none">1</div> 
 
<div class="div" style="background:#ddd;width:100%; height:500px;display:none">2</div> 
 
<div class="div" style="background:#ddd;width:100%; height:500px;display:none">3</div>

Answer 1

У вас есть опечатка ошибка:

<option vlaue="1">2</option> 

Изменить его:

<option value="1">2</option> 

Посмотреть это работает:

function valueNew(ele) { 
 
    // get all div with class name 'div' 
 
    var div = document.getElementsByClassName('div'); 
 
    // iterating over them and hidding all 
 
    for(var i=0;i<div.length;i++) { 
 
    div[i].style.display = 'none' 
 
    } 
 
    // getting div which is need to show using value of selected option 
 
    div[ele.value].style.display = 'block'; 
 
} 
 

 
// trigger change event to show default div 
 
document.getElementById('sel').onchange();

<select id="sel" onChange="valueNew(this)"> 
 
    <option value="0">1</option> 
 
    <option value="1">2</option> 
 
    <option value="2">3</option> 
 
</select> 
 

 
<div class="div" style="background:#ddd;width:100%; height:500px; display:none">1</div> 
 
<div class="div" style="background:#ddd;width:100%; height:500px;display:none">2</div> 
 
<div class="div" style="background:#ddd;width:100%; height:500px;display:none">3</div>