Форум

LRCenter · #1 (**permalink**) 13.08.2010, 19:42

Здравствуйте. Есть такой элемент навигации реализованный с помощью 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>

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

exec · #2 (**permalink**) 13.08.2010, 20:07

(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.

Если нужен более универсальный вариант — пишите, сделаем.

LRCenter · #3 (**permalink**) 13.08.2010, 20:35

Да желательно чтоб был универсальный, а этот вариант кроссбраузерный?
Класс это имя элемента?

exec · #4 (**permalink**) 13.08.2010, 20:41

Цитата:

а этот вариант кроссбраузерный?

Да.

Цитата:

Класс это имя элемента?

class="nav"

Цитата:

Да желательно чтоб был универсальный

(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;
			}
		}
	}
})();

LRCenter · #5 (**permalink**) 13.08.2010, 20:47

а можно использовать id, а не class?
А какой обработчик использовать у селекта если onChange нельзя?

exec · #6 (**permalink**) 13.08.2010, 20:51

Цитата:

а можно использовать id, а не class?

Нет, ID всегда один на страницу.

Цитата:

А какой обработчик использовать у селекта если onChange нельзя?

Можно. Просто если поставить onchange = handler, то старый onchange затрётся (если он был). Добавление обработчика через addEventListener/attachEvent решает эту проблему.

LRCenter · #7 (**permalink**) 15.08.2010, 08:57

exec, я нашел вот такой более компактный вариант:

<select onChange="location = this.value;">
<option value="">Выберите
<option value="1.html">111
<option value="2.html">222
<option value="3.html">333
</select>

Как вы думаете у него есть какие-нибудь недостатки?
Наверное я неправильно выразился и вы меня не так поняли. Все равно спасибо за помошь!
К сожалению не могу поднять вам карму, говорит должен поднять ее кому-нибудь еще сначала.

Форум

Справочник

Discord чат

Курсы javascript