Выпадающий, который мгновенно переключает информацию

Я ищу, чтобы написать html-страницу, которая имеет выпадающее меню на нем и некоторый контент. Например, выпадающее меню, в котором указаны семь дней недели и в зависимости от того, какой день выбран, div содержит действия этого дня. Я знаю, как сделать эту работу, чтобы вы могли выбрать нужный день, нажмите кнопку, а затем браузер загрузит новую страницу с нужной информацией. Как бы я начал писать его, чтобы как только пользователь нажимает на выпадающее меню, информация страницы изменяется. Я думал, что, возможно, я мог бы хранить информацию в кучке скрытых div, которые, щелкнув по выпадающему меню, могли быть заменены и выгружены. Однако я не уверен, как отобразить событие записи в выпадающем меню.Выпадающий, который мгновенно переключает информацию

источник

2011-04-11 keybored

Я думал, что, возможно, я мог бы хранить информацию в кучке скрытых div, которые, щелкнув по выпадающему меню, могли быть заменены.

Вы также можете использовать AJAX для загрузки данных.

Я не уверен, однако, как фиксировать событие записи в выпадающем меню.

JavaScript имеет много событий: http://www.w3schools.com/jsref/dom_obj_event.asp

я сделал плохой пример с использованием дивы:

<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

Понял, что я изменил javascript с помощью addEventListener() только для добавления события onchange непосредственно в тег select. Благодаря! – keybored

«Слушатель событий, похоже, не срабатывает» Вы используете Internet Explorer? IE нуждается в 'day.attachEvent (" onchange ", change_day);" – atlavis

Я бы порекомендовал вам использовать 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 использовать функцию, как, скрыть/показать. Каждый раз, когда в раскрывающемся списке запускается изменение, все div в div с классом: «hideAndShow» скрыты. Сразу после этого я показываю div, который был выбран, для получения выбранного значения.

источник

2011-04-11 18:55:06 David

Выпадающий, который мгновенно переключает информацию

ответ

Смежные вопросы