选择div更改时不显示的选项

Question

根据选择选项值，我有两个div，div必须更改。div会根据所选的值进行更改，但当它显示一个div时，下拉列表中的所选选项是错误的。例如：选择1时，div会发生更改，但在下拉列表中显示的值为0，反之亦然。这是我的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。有两个相同的ID和名称的选择菜单是没有意义的。这个问题是您的代码无法工作的部分原因。

您希望这两个属性都是唯一的。相反，我关注的是核心，它从DOM中获取值，比较它们，并通过JS更改样式。事件侦听器最好放在脚本中，而不是与元素内联，所以我将select"onchange"方法移到脚本中，在那里它变成了document.addEventListener('change', (e) => {——注意e——这是每个事件侦听器传递的单个参数，它被称为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>