下拉内容更改的问题

在页面加载时，所有内容都可见。要显示特定的下拉列表值，但现在三个选项卡都显示在页面加载中。下拉内容更改的问题

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

来源

2017-04-23 J. Shabu

这是因为你的脚本是隐藏所有的选项卡上进行openCity()功能第一次加载页面时不叫里面，只有当<select>改变。

您需要将隐藏在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来隐藏所有的选项卡。然后您可以告知您的active课程将display CSS属性更改为block，以便仅在活动时才显示其自身。

<style> 
    /* hide all tabs by default */ 
    .tabcontent { 
     display: none; 
    } 

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

然后，您可以删除hideAllTabs()功能完全是因为你使用纯CSS隐藏和显示选项卡。

来源

2017-04-23 10:14:53 Soviut

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

var e = document.getElementsByTagName("select")[0]; 
 
var evt = document.createEvent("HTMLEvents"); 
 
evt.initEvent("change", false, true); 
 
e.dispatchEvent(evt); 
 
    OR 
 
// Create a new 'change' event 
 
var event = new Event('change'); 
 
e.dispatchEvent(event);

来源

2017-04-23 10:36:40 PPB

下拉内容更改的问题

回答

相关问题