在页面加载时,所有内容都可见。要显示特定的下拉列表值,但现在三个选项卡都显示在页面加载中。下拉内容更改的问题
<select onchange="openCity(event, this.value)">
<option>Select search option</option>
<option>To Rent</option>
<option>To Sale</option>
</select>
<div id="Select search option" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="To Rent" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="To Sale" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>