Select 选项在 div 更改时不显示

Question

我有 2 divs 基于 select 选项值 div 必须改变。 div 正在根据值 selected 进行更改，但是当它显示一个 div 时，下拉列表中的 selected 选项是错误的。对于 example:when 1 是 selected，div 被更改但在下拉列表中显示的值是 0 副 versa.This 是我的 javascript代码。

function toggle(searchType) {
  var val1 = document.getElementById('val1');
  var val2 = document.getElementById('val2');

  if (searchType.value == '0') {
    val1.style.display = 'block';
    val2.style.display = 'none';
  } else {
    val1.style.display = 'none';
    val2.style.display = 'block';
  }
}

<div id="val1" style="width: 325px; border: 1px solid black; height: 329px;">
  <div class="searchType">
    <p style="font-size: 85%;">Search Type</p>
  </div>
  <div class="search">
    <select name="searchType" id="searchType" onchange="toggle(this)">
      <option value="0">0</option>
      <option value="1">1</option>
    </select>
  </div>
  <!--5 extra Div blocks like first name,last name,city etc.,-->
</div>
<div id="val2" style="width: 325px; border: 1px solid black; height: 329px;display:none;">
  <div class="searchType">
    <p style="font-size: 85%;">Search Type</p>
  </div>
  <div class="search">
    <select name="searchType" id="searchType" onchange="toggle(this)">
      <option value="0">0</option>
      <option value="1">1</option>
    </select>
  </div>
  <!--Different Div blocks like Name of the place, city etc-->
</div>

Answer 1

我稍微重新安排了您的 HTML。拥有 2 个具有相同 ID 和名称的相同 select 菜单没有意义。该问题部分归咎于您的代码无法正常工作。

您希望这两个属性都是唯一的。相反，我专注于核心，即从 DOM 中获取值，比较它们并通过 JS 更改样式。事件监听器最好放在你的脚本中——而不是与元素内联，所以我将 select 'onchange' 方法移到了脚本中，它变成了 document.addEventListener('change', (e) => { —— 注意 e - 这是与每个 eventListener 一起传递的单个参数，它被称为 event。下面的其余代码已被注释，因此您可以看到它在做什么。

window.addEventListener('load', () => {  
// we put our eventListeners inside a window.load listener to make sure the HTML has rendered on the page before we tell javascript to work with it
  document.querySelector('[name=searchType]').addEventListener('change', (e) => {
  // here is the change event listener for the select menu
    document.querySelectorAll('.valBox').forEach(v => {
    // when the change event is triggered, we loop through the 'valBox' elements (val1 and val2). I gave them a class to make this easier.
      let d = (+e.target.value === 0 && v.id === 'val1') || (+e.target.value === 1 && v.id === 'val2') ? 'block' : 'none';
      // here we're getting the value of the select menu choice (e.target.value) and compare it to the ID of the valBox we're in.
      // See that + right before e.target.value? That + tells javascript this is a number. otherwise it's a string
      v.style.display = d;
    })
  })
})

window.addEventListener('load', () => {  document.querySelector('[name=searchType]').addEventListener('change', (e) => {
    document.querySelectorAll('.valBox').forEach(v => {
      let d = (+e.target.value === 0 && v.id === 'val1') || (+e.target.value === 1 && v.id === 'val2') ? 'block' : 'none';
      v.style.display = d;
    })
  })
})

.valBox {
  width: 325px;
  border: 1px solid black;
  height: 329px;
  display: none;
}

<div class="searchType">
  <p style="font-size: 85%;">Search Type</p>
</div>
<div class="search">
  <select name="searchType">
    <option>Choose an option</option>
    <option value="0">0</option>
    <option value="1">1</option>
  </select>
</div>
<div id="val1" class='valBox'>Val 1 Block</div>
<div id="val2" class='valBox'>Val 2 Block</div>

Select 选项在 div 更改时不显示

Select option not displaying when div is changed

html

javascript

html-select