Меню из select-а
Здравствуйте. Есть такой элемент навигации реализованный с помощью JS:
<html>
<head>
<script>
function formHandler(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;}
</script>
</head>
<body>
<form name='form'>
<select name="site" size=1 onChange="javascript:formHandler()">
<option>Выбрать
<option value="1.html">1
<option value="2.html">2
<option value="3.html">3
</select>
</form>
</body>
</html>
Подскажите пожалуйста, как сделать сам скрипт, независимым от меню, т.е. чтоб при создании более чем одного меню на странице все они работали и не приходилось писать для каждого отдельный скрипт с абсолютной адресацией. |
(function () {
var nodes = document.querySelectorAll ? document.querySelectorAll( 'SELECT.nav' ) : document.getElementsByTagName( 'SELECT' ),
len = nodes.length;
for ( var i = 0; i < len; i++ ) {
if ( nodes[i].className == 'nav' ) {
nodes[i].onchange = function () {
location.href = this.value;
}
}
}
})();
Нужным селектам присвоить класс nav. Данный скрипт будет работать некорректно, если: 1. У селекта несколько классов. 2. У селекта назначит обработчик change. Если нужен более универсальный вариант — пишите, сделаем. |
Да желательно чтоб был универсальный, а этот вариант кроссбраузерный?
Класс это имя элемента? |
Цитата:
Цитата:
Цитата:
(function () {
function redirect() {
location.href = this.value;
}
var nodes = document.querySelectorAll ? document.querySelectorAll( 'SELECT.nav' ) : document.getElementsByTagName( 'SELECT' ),
len = nodes.length;
for ( var i = 0; i < len; i++ ) {
if ( /\bnav\b/.test( nodes[i].className ) {
if ( nodes[i].addEventListener ) {
nodes[i].addEventListener( 'change', redirect, false );
} else if ( nodes[i].attachEvent ) {
nodes[i].attachEvent( 'onchange', function () {
redirect.call( nodes[i] );
} );
} else {
nodes[i].onchange = redirect;
}
}
}
})();
|
а можно использовать id, а не class?
А какой обработчик использовать у селекта если onChange нельзя? |
Цитата:
Цитата:
|
exec, я нашел вот такой более компактный вариант:
<select onChange="location = this.value;"> <option value="">Выберите <option value="1.html">111 <option value="2.html">222 <option value="3.html">333 </select> Как вы думаете у него есть какие-нибудь недостатки? Наверное я неправильно выразился и вы меня не так поняли. Все равно спасибо за помошь! К сожалению не могу поднять вам карму, говорит должен поднять ее кому-нибудь еще сначала. |
| Часовой пояс GMT +3, время: 21:04. |