Скрипт для Select'a

[slavok47]

Вроде все просто но что то ни как не соображу

имеется Select1

<select name="select1"  onclick="selectValue(this.form)">
		  <option value="">Выберите значение</option>		  
		  <option value="Уровень1">Уровень1</option>
		  <option value="Уровень2">Уровень2</option>		  
		</select>

и Select2

<select name="select2">
		  <option value="">Выберано значение</option>		  
		  <option value="Выбрали2">Выбрали1</option>
		  <option value="Выбрали2">Выбрали2</option>		  
		</select>

Вот приметный код селектов

Задача: при выборе у select1 значения "Уровень2", select2 должен перескочить на "Выбрали2"

Как я понял скрипт будет выглядеть примерно так(но это только примерно, что-то все равно не правильно)

function selectValue(f) {
if (f.select1.value=Уровень2) f.select2.value = Выбрали2
else f.select2.value = 0
}

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

и еще, у value могут быть любые значения включая и кириллицу?

[Nekromancer]

и еще, у value могут быть любые значения включая и кириллицу?

В принципе да. Только кавычки надо ставить.

[Styx]

Проще всего (особенно для списков большего размера) сделать так:

<select size="1" name="select1" onchange="this.form.select2.selectedIndex=this.selectedIndex;">

[slavok47]

Больше нет идей? и куда делся пост Styx'a? а все норм что то IE заглючил,

<select size="1" name="select1" onchange="this.form.select2.selectedIndex=this.selectedIndex;">

Если я правильно понял, то из этого скрипта следует что 1=1, 2=2, 3=3 и тд хотя может не правильно понял, что то теорию не уловлю

но мне нужно что бы например, 5ое значение Селекта1=70му значению Селекта2

тоесть выбрал в Селекте1 5ое значение, Селект2 переключился на 70ое

Edited May 22, 2009 by slavok47

[Styx]

Если вообще нет никакой закономерности во взаимном порядке следования элементов этих списков, то можно воспользоваться таким приемом. В списке select1 каждому элементу option назначим id="N", где N — индекс того элемента в списке select2, который должен отобразиться при выборе данного option. Тогда по событию onchange в первом списке читаем значение id текущего элемента и назначаем во втором select'е соответствующее значение selectedIndex. Вот.

<form action="#" method="post">
   <select size="1" name="select1" onchange="this.form.select2.selectedIndex = parseInt(this.options[this.selectedIndex].id);">
	  <option value="" id="0">Выберите значение</option>
	  <option value="Уровень1" id="2">Уровень1</option>
	  <option value="Уровень2" id="1">Уровень2</option>
   </select>
   <select size="1" name="select2">
	  <option value="" name="">Выберано значение</option>
	  <option value="Выбрали2">Выбрали2</option>
	  <option value="Выбрали1">Выбрали1</option>
   </select>
 </form>

P.S. Ну, в вашем случае соответственно пятому элементу option в списке select1 назначаете id="70".

Edited May 22, 2009 by Styx

[slavok47]

Styx все заработало, спасибо огромное опять выручил!

а если не трудно, можете пояснить теоретически как работет эта функция,

 <select size="1" name="select1" onchange="this.form.select2.selectedIndex = parseInt(this.options[this.selectedIndex].id);">

Правильно ли я понял что id option'a в Селекте1= порядковому номеру option'у в Селекте2?

И еще не отходя от кассы как говориться. Можно ли этим способом реализовать такое:

Имеется:Селект и рядом иконка с сылкой.

Задача:При выборе определленного option'a к иконке присваивалась ссылка

Тоесть: выбираешь <option id="1"..... при нажатии на иконку срабатывает ссылка №1 - выбираешь <option id="2"..... при нажатии на иконку срабатывает ссылка №2

Edited May 22, 2009 by slavok47

[Styx]

можете пояснить теоретически как работет эта функция

Уже объяснил выше... При возникновении события onchange в списке select1 читается значение атрибута id в текущем (выбранном) элементе option. С помощью функции parseInt строковое значение переводится в значение числового типа и присваивается атрибуту selectedIndex второго списка.

Правильно ли я понял что id option'a в Селекте1= порядковому номеру option'у в Селекте2?

Правильно.

Можно ли этим способом реализовать такое

Можно. Нужно завести глобальный массив строк, в котором будут содержаться адреса для каждого option. Потом по событию onchange присваивать атрибуту href этой ссылки значение элемента массива с индексом, равным атрибуту selectedIndex списка select1. Если непонятно объяснил, могу набросать код...

[slavok47]

Нужно завести глобальный массив строк, в котором будут содержаться адреса для каждого option.

Вот это не понял, а в остальном сам попробую додуматься, лучше усвою

[Styx]

<script type="text/javascript">
   var links = new Array();
	   links[0] = "I_am_the_first_link.htm"; // href для случая, когда выбран первый option
	   links[1] = "I_am_the_second_link.htm"; // href для случая, когда выбран второй option
	   links[2] = "I_am_the_third_link.htm"; // href для случая, когда выбран третий option
// и т.д.

По событию onchange назначаем атрибуту href ссылки значение links[N], где N — значение selectedIndex списка select1.

Дальше попробуйте сами, раз желаете. Не буду сильно навязываться! =)

[slavok47]

Чет не получается

Дело в том, что у меня ссылки выглядят вот так:

<a href="java script://" onclick="java script:showDialog('Информация','Тут краткая информация','prompt');"><img src="images/info.png" width="16" height="16" border="0" align="middle" id="img1" /></a>

Тоесть это всплывающее сообщение

[Styx]

Вот так попробуйте.

JavaScript:

<script type="text/javascript">
   var links = new Array();
	   links[0] = "java script:showDialog('Информация_1','Тут краткая информация_1','prompt')";
	   links[1] = "java script:showDialog('Информация_2','Тут краткая информация_2','alert')";
	   links[2] = "java script:showDialog('Информация_3','Тут краткая информация_3','confirm')";

   function changeOption(sel) {
	  sel.form.select2.selectedIndex = parseInt(sel.options[sel.selectedIndex].id);
	  document.getElementById("hypLink").href = links[sel.selectedIndex];
   }

   function showDialog(info, shinfo, type) {
	  /* здесь тело вашей функции */
   }
</script>

XHTML:

<form action="#" method="post">
   <select size="1" name="select1" onchange="changeOption(this);">
	  <option value="" id="0">Выберите значение</option>
	   <option value="Уровень1" id="2">Уровень1</option>
	   <option value="Уровень2" id="1">Уровень2</option>
   </select>

   <a href="java script:showDialog('Информация_1','Тут краткая информация_1','prompt')" id="hypLink"><img src="images/info.png" width="16" height="16" border="0" align="middle" id="img1" /></a>

   <select size="1" name="select2">
	  <option value="">Выбрано значение</option>
	  <option value="Выбрали2">Выбрали2</option>
	  <option value="Выбрали1">Выбрали1</option>
   </select>
</form>

P.S. При написании кода здесь в сообщениях вставляется лишний пробел в слове javascript (в атрибуте href). O_o

Edited May 22, 2009 by Styx

[slavok47]

Собственно возник еще один вопрос,

Можно ли сделать Селект с возможностью выбора нескольких вариантов, но что бы этот Селект оставался таким же выпадающим, с использованием multiple="multiple" что то не получилось, меняется, не выпадает

[s0rr0w]

Собственно возник еще один вопрос,

Можно ли сделать Селект с возможностью выбора нескольких вариантов, но что бы этот Селект оставался таким же выпадающим, с использованием multiple="multiple" что то не получилось, меняется, не выпадает

Эмуляция селекта вам поможет.

[slavok47]

Вот тут нашел очень хороший селект http://alx.vingrad.ru/fwc/ru/examples

Третий, где выбор континентов, но что то не разобрался что к чему, помогите плиз, есть и CSS и XML, но JS что то не нашел, или не надо?

[s0rr0w]

Вот тут нашел очень хороший селект http://alx.vingrad.ru/fwc/ru/examples

Третий, где выбор континентов, но что то не разобрался что к чему, помогите плиз, есть и CSS и XML, но JS что то не нашел, или не надо?

Да все там есть. Копайте внимательнее.

[slavok47]

Да все там есть. Копайте внимательнее.

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

[Styx]

Там, действительно, всё расписано. В разделе "Документация" и прочих... Все скрипты скачиваются, можно смотреть. Впрочем, подобный же select, выбранный вами, можно при желании за небольшое время собрать на обычном JavaScript без XML. Хоть это уже не будет так "круто" звучать, как в случае XML! =)))

[slavok47]

Там, действительно, всё расписано. В разделе "Документация" и прочих... Все скрипты скачиваются, можно смотреть. Впрочем, подобный же select, выбранный вами, можно при желании за небольшое время собрать на обычном JavaScript без XML. Хоть это уже не будет так "круто" звучать, как в случае XML! =)))

Styx, спасибо, я все нашел

[s0rr0w]

Styx, спасибо, я все нашел

Вот и молодец!

[slavok47]

Вот тут нашел очень хороший селект http://alx.vingrad.ru/fwc/ru/examples

Третий, где выбор континентов, но что то не разобрался что к чему, помогите плиз, есть и CSS и XML, но JS что то не нашел, или не надо?

Что то для меня пока это сложная вариация селекта, может есть что то по проще?

[s0rr0w]

Что то для меня пока это сложная вариация селекта, может есть что то по проще?

Может и есть. Мне все бросить и заняться поиском вам чего-то попроще?

[slavok47]

Может и есть. Мне все бросить и заняться поиском вам чего-то попроще?

Поиском я сам занимаюсь, а спрашиваю у тех кто уже знает, если не знаеете, то и не нужно отвечать

[s0rr0w]

Поиском я сам занимаюсь, а спрашиваю у тех кто уже знает, если не знаеете, то и не нужно отвечать

Аааа, ну ждите, ждите...

Тут прям каждый второй занимается по 8 часов в сутки извращениями над селектами......

[Zippovich]

Вот тут нашел очень хороший селект http://alx.vingrad.ru/fwc/ru/examples

Третий, где выбор континентов, но что то не разобрался что к чему, помогите плиз, есть и CSS и XML, но JS что то не нашел, или не надо?

прикольная реализация селекта, только в ie7 5-й пример глючит

[slavok47]

прикольная реализация селекта, только в ie7 5-й пример глючит

Прикольная согласен, решил изучить, пока не пойму может ли у них быть сосотояние disabled как у обычных? есть идеи? если и есть не пойму куда присвоить использует кучу файлов

[s0rr0w]

есть идеи? если и есть не пойму куда присвоить использует кучу файлов

Есть идея. Вы, молодой человек, садитесь за изучение матчасти. И учите ее, пока не наступит полное понимание того, как это сделано.