根据 select 选项显示 div

Question

我试图根据 dropdown.It 与选项 1 和 2 的选择选项显示 div 但是当我选择第二个选项时它显示第三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>

根据 select 选项显示 div

Showing div based on select option

javascript

html

html-select