Jump to content
  • 0

как связать 2 поля со списком?


moy_login
 Share

Question

Я вроде много чего полистал на этом форуме и понял что это лучший сайт и форум. Думаю тут мне помогут.

Все просто... Вот нужно сделать такую штуку. Т.е. када выбираешь значение в 1ом поле, во втором поле подгружались значения зависимые от первого. Выбирая значение во втором поле со списком, подгружались значения в третьем и т.д.

Буду очень благодарен всем кто может помочь.. Очень хочу научиться такие штучки делать...

Link to comment
Share on other sites

24 answers to this question

Recommended Posts

  • 0

Ну для решения такой задачи недостаточно знания просто javascript. Если нужна такая подгрузка, то тут требуются технологии типа httpHtmlRequest... Вобщем, обратитесь к фреймворкам типа JQuery.

Естенственно тут нужны и серверные скрипты...

Link to comment
Share on other sites

  • 0

Ну вот. меня зацепило... Хочу знать.. :)

Ладно... я понял что быстро этому не научиться... а если упростить.. например: будет конкретный список в 1ом поле и в зависимости какое значение выбираешь соответствующее тому поле и открывается...

Поле со списком 1

Значение 1 = (появится) поле со списком "а"

Значение 2 = (появится) поле со списком "b"

Значение 3 = (появится) поле со списком "c"

...

т.е.

|поле со списком 1| (выбрано: Значение 2)

тут появилось: |поле со списком "b"|

А в итоге эти значения отправляются формой на сервер...

я не знаю правда как это сделать потому что много чего не знаю.. но с вашими подсказками может и получится...

Например есть ведь последующее меню которое появляется когда наводишь на кнопку предыдущего меню. (это переделанное и приведенное мною в такой вид меню :P хотя и не совсем правильное (я так думаю) :) )

9FoP6INEj0m4_4.png

скачать

если файла нет - пишите в тему, я перезалью.

Link to comment
Share on other sites

  • 0

Там есть такое свойство "hover" и "iehover" вроде... с ними нельзя попробывать сделать то что нужно? я не понимаю что это значит, но после нескольких часов разбирания того что там написано пришел к выводу что именно это свойство скрывает подменю пока не наведешь курсор на родительскую кнопку.

Аналогично если например в главном "поле со списком" выбрать значение то появится то последующее "поле со списком", которое соответствует данному значению. Можно так сделать?

Edited by moy_login
Link to comment
Share on other sites

  • 0

Не знаю, что вы там раскопали, но логика всегда такая. У любого элемента есть ряд событий, типа клик мышкой (onClick), изменение содержимого (onChange) и т.п. На эти события при помощи javascript можно повесить свою функцию, в которой описать, что нужно делать при возникновении этого события. В вашем случае на событие вешается показывание списка с содержимым в соответствии с текущим значением списка, который инициировал это событие.

Содержимое второго списка можно заранее описать на самой странице, если этот список очень редко обновляется, а можно динамически подгружать с сервера. Вы писали, что загружать с сервера. Тогда это значитльно усложняет задачу, поскольку надо написать скрипт, допустим на php, который будет принимать запрос и откуда-то брать список (из базы или файла на сервере) и отправлять его клиенту.

Ну вот так в двух словах. А причем тут hover, непонятно...

Link to comment
Share on other sites

  • 0

Searcher. Вот ТО что вы говорите.. я наверно плохо объясняю..

Да это будет конкретный, не изменяющийся список который, как я понял, "можно заранее описать на самой странице".

Эм я про сервер вроде ничего не писал...

Вот! Значит есть такое событие которое отображало бы второй список, после того как в первом выбираешь какое либо значение... Вот энто мне и надо. Спасиб за понимание... Подскажите что мне дальше делать чтоб сделать такую штуку?

Great Rash. Мне нужно сделать точно такие же поля со списками, с конкретными данными которые никогда не будут меняться...

Link to comment
Share on other sites

  • 0

Если вы не знаете JavaScript, то сделать подобные связанные списки вам будет очень непросто. Вот статья на тему: http://www.freeartists.ru/articles/programming/ajax-selects/ вас интересует пример №3

Link to comment
Share on other sites

  • 0

Можна и без аякса это сделать.

Скрыть поля, а при клике показывать (типа как выпадающее меню, только при клике). Значения на сервер передавать скрытыми полями.

Думаю так проще получится.

Link to comment
Share on other sites

  • 0

Спасибо Great Rash.. Буду учиться... Это очень нужная вещь.

Можна и без аякса это сделать.

Скрыть поля, а при клике показывать (типа как выпадающее меню, только при клике). Значения на сервер передавать скрытыми полями.

Думаю так проще получится.

Блин ну вот он! Тот кто меня понял... именно это я пытался сказать когда говорил про меню...

Edited by moy_login
Link to comment
Share on other sites

  • 0

Какие нафиг скрытые поля, да вы чего? Я же ссылку дал, даже написал, что искать надо пример №3! Все делается при помощи JSON, надо просто пересоздавать селект каждый раз когда срабатывает onchange. А вы в какие-то дебри полезли уже...

P.S. Да и в той статье все описано через задницу... вместо createElement/appendChild надо юзать спец. методы select'а - add() и remove()...

P.P.S. Вот что за люди... увидят заголовок про AJAX и не разобравшись сразу мнение составили о статье. Там все методы описаны по порядку с достоинствами и недостатками.

Link to comment
Share on other sites

  • 0

Great Rash, слушай, причем JSON?

Давай ка попробуем как можно проще.

делаем вложенные списки. При клике открываем вложенный список(чтото типа выпадающего меню, но на клик) внутри есть скрытые поля input type="hidden". И по сути делаем чтото типа кастомных чекбоксов.

аяксом ничего не догружать.

Как тебе такое?

Edited by mishka2
Link to comment
Share on other sites

  • 0

Да причем тут аякс? Я не пойму прям носом тыкнуть чтоли? Нет там никакого аякса.

Для тех кто в танке смотрим в код и видим:

var colorsArray = {
BentleyAzure : {red:"Красный",green:"Зеленый"},
ChevroletCorvette : {black:"Черный",blue:"Синий"},
FerrariEnzo : {green:"Зеленый",black:"Черный",yellow:"Желтый"}
}

colorsArray - это JSON.

Link to comment
Share on other sites

  • 0

Great Rash, ну я не в танке, я в бронивике. Че кричать то сразу?

Не кипятись, ты для меня тут самый авторитетный джеесер :)

Просто я сразу не вникал на том сайте что ты дал линку, что там к чему, увидел только что он просто насыщен словом AJAX. Вот и подумал что предлагаешь подгружать селекты.

Теперь к теме:

ТС дал линку на сайт, и говорит: "Хочу такой функционал..."

И также дал скрин, как ему нужно чтобы это выглядело.

И на скрине никаких селектов явно нету.

Вот поэтому я и говорил про вложенные списки, а в них кастомные радиобаттоны, ну или скрытые инпуты.

Вот.

Edited by mishka2
Link to comment
Share on other sites

  • 0
Great Rash, ну я не в танке, я в бронивике. Че кричать то сразу?

Боже упаси, я не кричал. Просто громко возмущался! :) Возмущался тому что ты по заголовку о статье судишь. Если чем обидел, то прошу прощения. Я правда не со зла. Мир?

По скринам которые дал ТС я тоже понял, что ему нужны выпадающие списки. Но тут уважаемый moy_login (хе-хе, забавный ник) дал ссылку на совершенно иное решение... вот и хз что ему надо...

Link to comment
Share on other sites

  • 0
Я вроде много чего полистал на этом форуме и понял что это лучший сайт и форум. Думаю тут мне помогут.

Все просто... Вот нужно сделать такую штуку. Т.е. када выбираешь значение в 1ом поле, во втором поле подгружались значения зависимые от первого. Выбирая значение во втором поле со списком, подгружались значения в третьем и т.д.

Буду очень благодарен всем кто может помочь.. Очень хочу научиться такие штучки делать...

Тут посмотрите, с примерами, разобрано по косточкам+готовый яваскрипт - имхо самое то для вашей задачи.

http://www.tigir.com/javascript_select.htm

Link to comment
Share on other sites

  • 0

Эм.. вы померились - молодцы! Теперь еще раз бы прочитали в чем суть тех слов где есть скрин... капец.. сотню раз уже повторил... Я просто приводил пример: два элемента. Второй скрывается пока не наведешь на первый....! Вот и все просто провел параллель между двумя похожими случаями.. Боже мой что не понятного... Тысячу раз повторил... не надо мне меню... Я подумал что можно со списками сделать так же как и с меню.. просто спрятать второй список пока не выбиришь значение в первом... Я ЭТО у вас спрашивал, а мне стали присылать как сделать меню. Вот сами не вникните в суть вопроса и делаете поспешные выводы...

Great Rash, еще раз спасибо.. мне это помогло, отталкиваюсь от данного материала...

Link to comment
Share on other sites

  • 0

Вот, то что вам нужно в таком случае.

Тот пример который вы привели на сайте Nvidia - это даже не близко стоящий пример. Это два совершенно разных случая с совершенно разным поведением. Да и объясняльщик из вас никудышний... нет бы в первом посте объяснить толком какое поведение нужно и картинку показать...

Link to comment
Share on other sites

  • 0

Из поста http://forum.htmlbook.ru/index.php?s=&...st&p=159201, я понял следующее:

"будет конкретный список в 1ом поле и в зависимости какое значение выбираешь соответствующее тому поле и открывается..."

Есть список. Один вертикальный. Кликаем на первом пункте - рядом появляется второй список (аналог выпадающего меню, но только на клик).

А в итоге эти значения отправляются формой на сервер...

А это я понял так: выбираем чтото в выпавшем списке, и это можна будет отправить на сервер (чтото типа кастомных радиобоксов, или чекбоксов), ну просто судя по дизу это легче сделать не селектами.

Вот сразу пытаюсь выяснить чего же нужно ТС, а потом уже попробовать помочь.

Edited by mishka2
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy