下拉內容更改的問題

在頁面加載時，所有內容都可見。要顯示特定的下拉列表值，但現在三個選項卡都顯示在頁面加載中。下拉內容更改的問題

<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

下拉內容更改的問題

回答

相關問題