+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Скрипт выбор из списка и переход JavaScript

Суть данного скрипта состоит в том, что у нас есть поле со списком, из которого мы выбираем пункт, жмем на кнопку и переходим по ссылке. Давайте сделаем.
Для начала напишем код функции перехода:
<script language="JavaScript" type="text/javascript">
function gotolink(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="newwin"){
window.open(selectedopt.value)
}
else{window.location=selectedopt.value}
}</script>
Код скрипта готов, теперь создаем простую форму
<form name="gogogo">
<select name="select">
<option value="#">Выберите сайт...</option>
<option value="http://www.yandex.ru">yandex</option>
<option value="http://www.google.ru" target="newwin">google</option>
<option value="http://www.net-f.ru">нэтфорс</option></select>
<input type="button" value="Перейти" onClick="gotolink(document.gogogo.select)">
</form>
Как видите в Google мы добавили параметр target="newwin", благодаря которому, при переходе по ссылке Google будет открыт в новом окне, при переходе по остальным ссылкам, они будут открываться в том же окне, выбирайте сами, что вам больше подходит.

Существует еще один вариант перехода по ссылке, когда вы переходите сразу после выбора элемента из списка. Ну что ж, реализуем и этот вариант. В принципе код мало отличается от предыдущего, изменяется лишь событие OnClick на OnChange
<script language="JavaScript" type="text/javascript">
function gonow(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="newwin"){
window.open(selectedopt.value)
}
else{window.location=selectedopt.value}
}</script>
<form name="form">
<select name="sel" onChange="gonow(document.form.sel)">
<option value="#">Выберите сайт...</option>
<option value="http://www.yandex.ru">Яndex</option>
<option value="http://www.google.ru" target="newwin">Google</option>
<option value="http://www.net-f.ru">НэтФорс</option></select>
</form>

Демонстрация


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 7630