下拉即時切換信息

我正在尋找寫一個HTML頁面，它有一個下拉菜單和一些內容。例如，下拉菜單中列出了每週七天，並根據哪一天選擇一個div來包含當天的活動。我知道如何使這項工作，以便您可以選擇你想要的一天，按下按鈕，然後瀏覽器加載一個新的頁面與所需的信息。我該如何去編寫它，這樣一旦用戶點擊下拉菜單條目，頁面的信息就會改變。我在想，也許我可以將信息存儲在一堆隱藏的div中，只要點擊下拉菜單的條目，就可以換入和換出。但是，我不確定如何在選定的下拉菜單中捕獲條目的事件。下拉即時切換信息

來源

2011-04-11 keybored

我在想，也許我可以存儲在一堆隱藏層的是，當點擊下拉菜單條目，可進出交換的信息。

您還可以使用AJAX加載數據。

但是，我不確定如何在選定的下拉菜單中捕獲條目的事件。

JavaScript有很多的事件：http://www.w3schools.com/jsref/dom_obj_event.asp

我已經做了壞榜樣使用的div：

<html> 
<body> 

<select id="day"> 
    <option>Mon</option> 
    <option>Tue</option> 
    <option>Wed</option> 
    <option>Thu</option> 
    <option>Fri</option> 
    <option>Sat</option> 
    <option>Sun</option> 
</select> 

<div id="Mon">Mon contents</div> 
<div id="Tue" style="display: none;">Tue contents</div> 
<div id="Wed" style="display: none;">Wed contents</div> 
<div id="Thu" style="display: none;">Thu contents</div> 
<div id="Fri" style="display: none;">Fri contents</div> 
<div id="Sat" style="display: none;">Sat contents</div> 
<div id="Sun" style="display: none;">Sun contents</div> 

<script> 
var day = document.getElementById ("day"); 
var current_day = day.value; 

function change_day() 
{ 
    document.getElementById(current_day).style.display = "none"; 
    document.getElementById(day.value).style.display = "block"; 
    current_day = day.value; 
} 

day.addEventListener("change", change_day); 

</script> 
</body> 
</html>

來源

2011-04-11 18:04:39 atlavis

這看起來很有希望，但事件監聽器似乎沒有被觸發。 – keybored 2011-04-11 18:54:56

想通了，我改變了javascript的addEventListener（），直接添加一個onchange事件到select標籤。謝謝！ – keybored 2011-04-11 19:01:13

'事件監聽器似乎沒有被觸發'你使用Internet Explorer？ IE需要'day.attachEvent（「onchange」，change_day）;「' – atlavis 2011-04-11 19:13:16

我會建議你使用jQuery來實現一些顯示/隱藏技巧，如果你有像這樣的靜態數據。

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.5.js"></script> 
    <style type="text/css"> 
    .hidden{ display:none; } 
    </style> 
</head> 
<body> 
    <button>Toggle</button> 
<div class="hideandshow"> 
    <div class="hidden" id="content1">Content 1</div> 
    <div class="hidden" id="content3">Content 3</div> 
    <div class="hidden" id="content4">Content 4</div> 
</div> 
<select id="select"> 
    <option value="">Select something to show</option> 
    <option value="content1">Show Content 1</option> 
    <option value="content3">Show Content 3</option> 
    <option value="content4">Show Content 4</option> 
</select> 
<script> 
$("#select").change(function() { 
    $(".hideandshow div").hide(); 
    var divToShow = $("#select option:selected").val(); 
    if(divToShow == "") 
     return; 
    $("#" + divToShow).show(); 
}); 
</script> 
</body> 
</html>

如果你看看代碼，你可以看到我加載jQuery使用像hide/show這樣的函數。每次在下拉列表中觸發更改時，div中隱藏類爲「hideAndShow」的所有div。之後，我顯示已選擇的div檢索選定的值。

來源

2011-04-11 18:55:06 David

下拉即時切換信息

回答

相關問題