Jump to content
  • 0

Выпадающее меню или нужен совет


Titan
 Share

Question

Имеется скрипт:

<script type="text/javascript">
function show_div(div_id) {

document.getElementById('the_div_1').style.display = 'none';
document.getElementById('the_div_2').style.display = 'none';
document.getElementById('the_div_3').style.display = 'none';
document.getElementById(div_id).style.display = '';
} </script>

<div><select>
<option onclick="show_div('the_div_1'); return false;" >1</option>
<option onclick="show_div('the_div_2'); return false;" >2</option>
<option onclick="show_div('the_div_3'); return false;" >3</option>
</select></div>

<div id="the_div_1" >Бла-бла-бла 1</div>
<div id="the_div_2" style="display:none;" >Бла-бла-бла 2</div>
<div id="the_div_3" style="display:none;" >Бла-бла-бла 3</div>

В Лисе скрипт работает на ура, а вот в Осле(в чем, собственно, и проблема) - отказывается.

Вопрос: Что делать?

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Спс за совет) Пока пытаюсь написать жизнеспособный скрипт) Получается нечто вроде этого:

<script type="text/javascript">
function show_div(div_id) {

document.getElementById('the_div_1').style.display = 'none';
document.getElementById('the_div_2').style.display = 'none';
document.getElementById('the_div_3').style.display = 'none';
document.getElementById(div_id).style.display = '';
}
var rblMenu = function(s) {
var elOption = s.options[s.options.selectedIndex];
show_div('the_div_id');
}
</script>

<select id="rbl" onChange="rblMenu(this);" >
<option >1</option>
<option >2</option>
<option >3</option>
</select>

Естественно, не пашет) Очевидно, я что-то делаю не так?

Link to comment
Share on other sites

  • 0

Оригинальный скрипт(первое сообщение отредактировано мной для лучшего понимания моей ситуации) показывает данные, изначально скрытые свойством display:none.

Если действие подвешено на ссылку или кнопку - все везде прекрасно пашет)

Однако потребовалось подвесить на выпадающее меню... Скрипт пашет лишь в Лисе). С этой проблемой я и обратился сюда. В ответ мне дали ссылку на другую тему) Почесав в затылке, я попробовал(и пробую) написать новый скрипт) Похоже, я пошел по неправильному пути) Что мне посоветуете?

Link to comment
Share on other sites

  • 0

Как же с вами сложно.

2Titan, ваше объяснения может быть понятно только вам, вы это понимаете?.

Опишите пошагово, что дано, и что должно происходить, например:

На странице есть элемент

[uPD] Сразу надо было начинать с правки первого сообщения. Вы же сами изначально лишили себя помощи, предоставив урезанную информацию.

Link to comment
Share on other sites

  • 0

Конкретно по тому, как вы пытались решить задачу:

<script type="text/javascript">
function show_div(select) {
var options = select.getElementsByTagName('option'); //Получаем все option элементы в селекте
var selected_option = select.options[select.options.selectedIndex]; //Получаем выбранную опцию

//Пробегаем по опциям
for (var i = 0; i < options.length; i++) {
var child = options.item(i);
if (child != selected_option) {
//child.value имеет значение сходное с id скрываемых div'ов, поэтому легко получаем доступ к этим div'ам и прячем их
document.getElementById(child.value).style.display = 'none';
}
}

//Делаем видимым div, у которого id сходно с значением выбранной опцией selected_option.value
document.getElementById(selected_option.value).style.display = '';
}
</script>

<div>
<select onchange="show_div(this)">
<option value="the_div_1">1</option>
<option value="the_div_2">2</option>
<option value="the_div_3">3</option>
</select>
</div>

<div id="the_div_1">Бла-бла-бла 1</div>
<div id="the_div_2" style="display:none;">Бла-бла-бла 2</div>
<div id="the_div_3" style="display:none;">Бла-бла-бла 3</div>

Но как более разумный вариант, рассмотрите такую структуру:

<div>
<select onchange="show_div(this)">
<option value="Бла-бла-бла 1">1</option>
<option value="Бла-бла-бла 2">2</option>
<option value="Бла-бла-бла 3">3</option>
</select>
</div>

<div id="the_div"></div>

При первой загрузке страницы в div вставляется выбранное по умолчанию значение селекта.

При дальнейшем выборе опций, в div просто вставляются значения (value) из select'а.

Экспериментируйте.

Link to comment
Share on other sites

  • 0
Как же с вами сложно.

2Titan, ваше объяснения может быть понятно только вам, вы это понимаете?.

Опишите пошагово, что дано, и что должно происходить, например:

На странице есть элемент . При выборе любой его опции должно происходить [то-то].

[uPD] Сразу надо было начинать с правки первого сообщения. Вы же сами изначально лишили себя помощи, предоставив урезанную информацию.

Попробую:)

Итак, допустим, мы имеем на одной странице много информации. Для того, чтобы с ней ознакомится приходиться много прокручивать страницу вниз. Это неудобно. Потому приходиться изголяться. В этом нам помогает искомый скрипт:

1. Вся инфа разбита на части(хотя бы на 3) и заключена в дивы.

2. Последним двум дивам присвоено свойство display:none

3. Т.е. изначально на странице отображается только первая часть.

Скрипт приводит в действие элемент . При выборе соответствующего пункта меню прячется исходная первая часть и показывается заранее скрытая инфа)

В этом и выражается действие скрипта, обращающегося через идентификатор к диву и его свойству display:none .

Если до сих пор непонятно, что я имею ввиду - вот: страница-пример

ЗЫ. Спасибо, будем изучать)

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy