Javascript 下拉列表内容更改问题

加载页面时，所有内容都可见。希望只显示特定的下拉列表值，但现在页面加载时会显示三个选项卡

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

选择搜索选项
出租
出售
伦敦
伦敦是英国的首都

巴黎
巴黎是法国的首都。

东京
东京是日本的首都

函数openCity（evt、cityName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

这是因为脚本隐藏了

openCity（）

函数中的所有选项卡，只有在

更改时，才会在首次加载页面时调用该函数

您需要将隐藏在

openCity（）

函数之外的选项卡的代码移动到它自己的函数中，您可以多次调用它

// pre-cache these values outside your function
var tabcontent = document.getElementsByClassName("tabcontent");
var tablinks = document.getElementsByClassName("tablinks");

// reusable hide function you can call multiple times
function hideAllTabs() {
    for (var i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
}
hideAllTabs();

function openCity(evt, cityName) {
    hideAllTabs();

    for (var i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

---

然后，您可以完全删除该函数，因为您使用纯CSS隐藏和显示选项卡。

您可以在加载文档时在选择列表上触发更改事件

var e=document.getElementsByTagName（“选择”）[0]；
var evt=document.createEvent（“HTMLEvents”）；
evt.initEvent（“变更”、假、真）；
e、 调度事件（evt）；
或
//创建新的“更改”事件
var事件=新事件（“变更”）；
e、 调度事件（事件）
<style>
    /* hide all tabs by default */
    .tabcontent {
        display: none;
    }

    /* only show the active tab */
    .active {
        display: block;
    }
</style>