При выборе какого-то значения в select'e нужно показывать другой select рядом

@BuGi · Регистрация: 02.01.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте, я полный ноль в js, но нужно следующее:
На сайте есть разделы. При выборе какого-то значения в select'e нужно показывать другой select рядом (скрипт должен брать подразделы выбранного раздела с сервера, ну или сразу брать откуда-нибудь со страницы сразу) с подразделами. Их может быть несколько, поэтому как-то динамически надо запилить. Если можно, то дайте скрипт

Или сайт, откуда можно скопировать это

@Padimanskas · 23.11.2013, 16:28

Сообщение от BuGi

Здравствуйте, я полный ноль в js

Как же так?

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<script>
var s = [
    {value: 1, text: 'item1'},
    {value: 2, text: 'item2'},
    {value: 3, text: 'item3'},
    {value: 4, text: 'item4'},
    {value: 5, text: 'item5'}
];
$('select:nth-child(1)').change(function(){
var newSelect = $('<select>');
s.forEach(function(item, i){
    newSelect.append( $('<option>', item) ).appendTo($('body'));
});
});
</script>
</body>
<html>

Данные с сервера получаем вот так:

JavaScript
1
2
3
$.get('http://www.site.com/list.json', function(items){ 
    ...
}, 'json');

@BuGi · 23.11.2013, 21:13 **[ТС]**

Лучше сразу хранить категории и подкатегории на странице или получать при надобности с сервера? Они у меня статические и наверно редко будут изменяться

@fenix1991 · 24.11.2013, 12:29

Я как делал.

Событие onchange="myfunction(this.value)" на select. В событии скрипт:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function myfunction(value1) {
value1 = 
$.ajax({
        type: "POST",
        url: "script.php",
        data: "field1="+value1,
        success: function(msg){
            $("#resultblock").append(msg);
       }
    });
}

В php скрипте. Получаете поле обычным $_POST['filed1'] и потом принтом выводите html код. Он будет выводиться в <div id="resultblock"></div>.

Писал на скорую руку. Надеюсь принцип понятен)

@BuGi · 04.12.2013, 19:48 **[ТС]**

Такой вопрос: стоит ли выводить сразу все (куда-нибудь, чтобы скрипт потом сразу брал) или стоит подгружать?

@fenix1991 · 04.12.2013, 20:44

Лучше делать подгрузку конечно, заодно узнаете как это делается, авось понравится ajax и будете в других местах его применять.
Да и вообще, мы же тут не быдлокодеры из подмосковья, так что давайте красиво писать.

@BuGi · 04.12.2013, 21:00 **[ТС]**

JavaScript
1
$("#resultblock").append(msg);

Тут скорее всего не так надо будет. Ведь если выберется другой пункт, то надо будет это убрать, а оно останется

@fenix1991 · 04.12.2013, 21:06

Сообщение от BuGi

JavaScript
1
$("#resultblock").append(msg);

Тут скорее всего не так надо будет. Ведь если выберется другой пункт, то надо будет это убрать, а оно останется

Ну да да, html(msg), косячнул чутка =)

@BuGi · 04.12.2013, 21:12 **[ТС]**

Сообщение от fenix1991

Ну да да, html(msg), косячнул чутка =)

Не, я просто бегиннер в джаваскрипте, заметил) А если у меня будет 3 раздела например? То есть выбираю 1, 2, 3 (все должны поочередно появляться). Если я правильно понял, то html(msg) должен раз добавить и все. А меня надо после этого еще 1

Добавлено через 2 минуты
Хотя для начала можно обойтись и двумя.. А как сделать, чтобы отправлялся только конечный айдишник? Т.е есть выбор
-Электроника
--Что-то
-Другое
И при выборе другое новый селект появиться не должен, а должен отправиться id этого другого, а вот если выберу Электроника->Что-то, то id электроники не нужен, а нужен id Что-то

@fenix1991 · 04.12.2013, 21:36

Сообщение от BuGi

Не, я просто бегиннер в джаваскрипте, заметил) А если у меня будет 3 раздела например? То есть выбираю 1, 2, 3 (все должны поочередно появляться). Если я правильно понял, то html(msg) должен раз добавить и все. А меня надо после этого еще 1

Добавлено через 2 минуты
Хотя для начала можно обойтись и двумя.. А как сделать, чтобы отправлялся только конечный айдишник? Т.е есть выбор
-Электроника
--Что-то
-Другое
И при выборе другое новый селект появиться не должен, а должен отправиться id этого другого, а вот если выберу Электроника->Что-то, то id электроники не нужен, а нужен id Что-то

Да ну просто. В скрипте перед отправкой ajax Запроса проверяете какое значение пришло: если пришло значение соответствующее полю "Другое" то делаете одно, если другое значение - то делать другое.

Как делать последовательные выпадающие списки..
Я делал так. Выполняется ajax-запрос, а он возвращает список (select) в котором уже содержится код с onchange'ем, в котором вызывается другая функция, отправляющая другой запрос ( ну или можно сделать чтобы одна функция всё отправляла, по ситуации смотреть надо).

@BuGi · 04.12.2013, 23:27 **[ТС]**

Сообщение от fenix1991

Да ну просто. В скрипте перед отправкой ajax Запроса проверяете какое значение пришло: если пришло значение соответствующее полю "Другое" то делаете одно, если другое значение - то делать другое.

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

@fenix1991 · 04.12.2013, 23:30

Я так понял у Вас перезагрузка страницы чтоли происходит?
Вообще в ajax-запросе вы данные передаете сами, так что лишнее не должно передаваться. Смотрите пример выше

@BuGi · 04.12.2013, 23:32 **[ТС]**

Сообщение от fenix1991

Я так понял у Вас перезагрузка страницы чтоли происходит?
Вообще в ajax-запросе вы данные передаете сами, так что лишнее не должно передаваться. Смотрите пример выше

Нет, речь же идет о том, что селект после выбора главной категории не будет заменяться, а рядом еще один будет появляться? Я хочу это)

@fenix1991 · 05.12.2013, 00:12

да рядом, ещё один будет, укажите только при вызове ajax в новый div записывать данные

@BuGi · 09.12.2013, 08:07 **[ТС]**

Все работает с одной категорией. Но я все-таки не понимаю как сделать динамическое количество категорий. Стоит ли для них создавать определенное количество дивов/спанов и потом их заполнять или можно сделать как-то более динамическим способом?

@fenix1991 · 09.12.2013, 09:32

Можно создавать определенное количество дивов и спанов, а можно примерно так:

HTML5
1
2
3
<div id="myselectone">
123
</div>

JavaScript
1
2
3
4
5
/*ajax запрос, где
success: function(msg){
            var val = jQuery("div[id*='myselect']");
            jQuery(msg).insertAfter(val);
*/

Идея в чем. Есть блок с id="myselectone". Вы отправляете ajax запрос, где генерируются данные и select с id, который содержит в себе "myselect". Далее скрипт ищет последний элемент на странице с таким id и вставляет Ваши данные после него. Если опять пошлете запрос, то новые данные будут вставлены уже после второго селекта.

P.S. Возможно что-то неверно)) Не тестировал и писал на коленке, но я бы думал в этом направлении. Возможно будет ошибка с var val; Тут надо смотреть документацию и просто тестировать будут ли ошибки. Могу скинуть статейку вместе с сайтом, в котором пользуюсь мини-справочником по селекторам.

@BuGi · 09.12.2013, 15:26 **[ТС]**

А что если создать объект
var data = {id, html};//тут дочерние разделы
Сделать массив и хранить там id выбранного уровня и хтмл. А при выборе проверять ид и устанавливать хтмл. Но вот проблема. Каждый новый селект должен хранить свой уровень у себя и на событие onchange надо запилить передачу этого уровня. Но где хранить этот уровень?

@fenix1991 · 09.12.2013, 15:36

Да по сути уровни не нужны, если писать каждый раз после последнего элемента insertAfter

@BuGi · 09.12.2013, 19:26 **[ТС]**

А если я захочу изменить категорию? Не получится тогда, оно разместится дальше, а не заменит собой существующие селекты

@fenix1991 · 09.12.2013, 19:36

Получится. Но Вы делайте проверки соответствующие. Например, при срабатывании события onchange на данной категории, все последующие удалять при помощи jquery.

Новые блоги и статьи Все статьи Все блоги /
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

@BuGi 25 / 25 / 11 Регистрация: 02.01.2012 Сообщений: 371

	При выборе какого-то значения в select'e нужно показывать другой select рядом 23.11.2013, 15:45. Показов 6979. Ответов 20 Метки нет (Все метки) Здравствуйте, я полный ноль в js, но нужно следующее: На сайте есть разделы. При выборе какого-то значения в select'e нужно показывать другой select рядом (скрипт должен брать подразделы выбранного раздела с сервера, ну или сразу брать откуда-нибудь со страницы сразу) с подразделами. Их может быть несколько, поэтому как-то динамически надо запилить. Если можно, то дайте скрипт Или сайт, откуда можно скопировать это 0

@BuGi 25 / 25 / 11 Регистрация: 02.01.2012 Сообщений: 371
	23.11.2013, 21:13 [ТС]
	Лучше сразу хранить категории и подкатегории на странице или получать при надобности с сервера? Они у меня статические и наверно редко будут изменяться 0

@BuGi 25 / 25 / 11 Регистрация: 02.01.2012 Сообщений: 371
	04.12.2013, 19:48 [ТС]
	Такой вопрос: стоит ли выводить сразу все (куда-нибудь, чтобы скрипт потом сразу брал) или стоит подгружать? 0

@fenix1991 25 / 25 / 5 Регистрация: 19.07.2011 Сообщений: 123
	04.12.2013, 20:44
	Лучше делать подгрузку конечно, заодно узнаете как это делается, авось понравится ajax и будете в других местах его применять. Да и вообще, мы же тут не быдлокодеры из подмосковья, так что давайте красиво писать. 1

@fenix1991 25 / 25 / 5 Регистрация: 19.07.2011 Сообщений: 123
	04.12.2013, 23:30
	Я так понял у Вас перезагрузка страницы чтоли происходит? Вообще в ajax-запросе вы данные передаете сами, так что лишнее не должно передаваться. Смотрите пример выше 1

@fenix1991 25 / 25 / 5 Регистрация: 19.07.2011 Сообщений: 123
	05.12.2013, 00:12
	да рядом, ещё один будет, укажите только при вызове ajax в новый div записывать данные 1

@BuGi 25 / 25 / 11 Регистрация: 02.01.2012 Сообщений: 371
	09.12.2013, 08:07 [ТС]
	Все работает с одной категорией. Но я все-таки не понимаю как сделать динамическое количество категорий. Стоит ли для них создавать определенное количество дивов/спанов и потом их заполнять или можно сделать как-то более динамическим способом? 0

@BuGi 25 / 25 / 11 Регистрация: 02.01.2012 Сообщений: 371
	09.12.2013, 15:26 [ТС]
	А что если создать объект var data = {id, html};//тут дочерние разделы Сделать массив и хранить там id выбранного уровня и хтмл. А при выборе проверять ид и устанавливать хтмл. Но вот проблема. Каждый новый селект должен хранить свой уровень у себя и на событие onchange надо запилить передачу этого уровня. Но где хранить этот уровень? 0

@fenix1991 25 / 25 / 5 Регистрация: 19.07.2011 Сообщений: 123
	09.12.2013, 15:36
	Да по сути уровни не нужны, если писать каждый раз после последнего элемента insertAfter 0

@BuGi 25 / 25 / 11 Регистрация: 02.01.2012 Сообщений: 371
	09.12.2013, 19:26 [ТС]
	А если я захочу изменить категорию? Не получится тогда, оно разместится дальше, а не заменит собой существующие селекты 0

@fenix1991 25 / 25 / 5 Регистрация: 19.07.2011 Сообщений: 123
	09.12.2013, 19:36
	Получится. Но Вы делайте проверки соответствующие. Например, при срабатывании события onchange на данной категории, все последующие удалять при помощи jquery. 0