javascript - 根据选择选项显示 div

Question

已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。

---

这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

已关闭 7 年前。

Improve this 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>