javascript - Select option not displaying when div is changed

Question

I have 2 divs based on the select option value the div must be changing. The div is changing based on the value selected but when it displays one div the selected option is wrong in the dropdown. for example:when 1 is selected the div gets changed but in the dropdown the value displayed is 0 and vice versa.This is my javascript code.

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>

标签： javascripthtmlhtml-select

Answer 1

I rearranged your HTML a little. It didn't make sense to have 2 identical select menus with identical IDs and names. That problem was partially to blame for your code not working.

You want both of those attributes to be unique. Instead, I focused on the core, which is taking values from the DOM, comparing them and changing styles via JS. Event listeners are better placed in your script - rather than be inline with the element, so I moved the select 'onchange' method to the script, where it becomes document.addEventListener('change', (e) => { -- Note the e - that is the single argument passed with each eventListener and it is called event. The rest of the code below is commented so you can see what it's doing.

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>