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

slavok47 · May 21, 2009

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

имеется 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 · May 21, 2009

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

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

Styx · May 21, 2009

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

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

slavok47 · May 22, 2009

Больше нет идей? и куда делся пост 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 · May 22, 2009

Если вообще нет никакой закономерности во взаимном порядке следования элементов этих списков, то можно воспользоваться таким приемом. В списке 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 · May 22, 2009

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 · May 22, 2009

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

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

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

Правильно.

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

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

slavok47 · May 22, 2009

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

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

Styx · May 22, 2009

<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 · May 22, 2009

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

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

<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 · May 22, 2009

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

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 · May 23, 2009

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

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

s0rr0w · May 23, 2009

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

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

slavok47 · May 23, 2009

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

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

s0rr0w · May 23, 2009

Вот тут нашел очень хороший селект http://alx.vingrad.ru/fwc/ru/examples
Третий, где выбор континентов, но что то не разобрался что к чему, помогите плиз, есть и CSS и XML, но JS что то не нашел, или не надо?

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

slavok47 · May 24, 2009

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

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

Styx · May 24, 2009

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

slavok47 · May 24, 2009

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

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

s0rr0w · May 24, 2009

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

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

slavok47 · May 25, 2009

Вот тут нашел очень хороший селект http://alx.vingrad.ru/fwc/ru/examples
Третий, где выбор континентов, но что то не разобрался что к чему, помогите плиз, есть и CSS и XML, но JS что то не нашел, или не надо?

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

s0rr0w · May 25, 2009

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

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

slavok47 · May 25, 2009

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

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

s0rr0w · May 25, 2009

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

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

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

Zippovich · May 25, 2009

Вот тут нашел очень хороший селект http://alx.vingrad.ru/fwc/ru/examples
Третий, где выбор континентов, но что то не разобрался что к чему, помогите плиз, есть и CSS и XML, но JS что то не нашел, или не надо?

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

slavok47 · May 25, 2009

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

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

s0rr0w · May 25, 2009

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

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

Sign In

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

Question

Link to comment

Share on other sites

32 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information