Поведение селекта

@духачевский · Регистрация: 13.11.2014

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

Всем привет, ребята помогите решить непонятную мне задачу. Ничего не могу придумать для того что бы застилизовать как требуется селект. А именно вопрос такой. Существует несколько селект которые необходимо выбирать по порядку. Выбор вариантов последующего селект зависит от выбора варианта предыдущего. Так вот я хочу что бы изначально все селекты были "дизайблед" (и сам цвет фона у селект был серый), а уже при клике предоставлялось возможность выбрать "опшин" и цвет фона селекта стал например белым. Как это можно реализовать может кто подсказать пожалуйста?

@madzal · 20.02.2016, 18:02

если убрать disabled то будет белый фон ... что конкретно у вас не получается ?

@духачевский · 20.02.2016, 18:17 **[ТС]**

Я хочу что бы изначально select был disabled, и placeholder с пустым значением. Но была возможность кликать на него и выбирать значения option, после выбора какого то option это значение бы вставало на место placeholder и цвет фона у select стал бы белым. Прилагаю скрин что у меня есть сейчас

@духачевский · 20.02.2016, 18:18 **[ТС]**

Здесь смысл такой что от выбора option последующего select, будет зависеть от выбора предыдущего

@kalabuni · 20.02.2016, 18:46

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

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

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1. Россия
    1.1. Москва
        1.1.1. Третьяковская галерея
        1.1.2. Алмазный фонд
        1.1.3. Оружейная палата
    1.2. Санкт-Петербург
        1.2.1. Эрмитаж
        1.2.2. Кунсткамера
        1.2.3. Музей артиллерии
        1.2.4. Музей Ахматовой
2. Украина
    2.1. Киев
        2.1.1. Музей Булгакова
        2.1.2. Музей сновидений
        2.1.3. Музей Чернобыля
        2.1.4. Музей одной улицы
    2.2. Одесса
        2.2.1. Музей истории евреев
        2.2.2. Музей героической обороны
        2.2.3. Музей коньячного дела Шустова

@духачевский · 20.02.2016, 18:50 **[ТС]**

Да список у меня есть, но неужели он важен? Я хочу понять как такие селекты сделать. Если вам не трудно не могли бы объяснить пожалуйста)

@kalabuni · 20.02.2016, 19:01

разумеется, важен -- каким образом, по-вашему, будут создаваться опшены во втором (третьем, четвёртом) селектах, если неизвестны их тексты?

Или вам нужен чисто теоретический ответ?

отвечаю:

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

3. на каждый селект "навешиваете" функцию на событие onchange
эта функция определяет selectedIndex своей коллекции опшенов
если он ненулевой, то следующий по списку селект становится "доступным" (и в нём формируются опшены, текст которых берётся из массива, который изначально сформирован на основе того самого "списка" выше
если же нулевой, то все последующие селекты вновь "дисаблятся"

Всё понятно? Без кода-примера разберётесь?

Удачи!

@духачевский · 20.02.2016, 19:09 **[ТС]**

Спасибо, да в том то и дело что теории достаточно. Если вам не трудно то не могли бы код дать. На выходных хочу разобраться что бы на работе показать во вторник) Ну если конечно не затруднит

@kalabuni · 20.02.2016, 19:15

Отлично!

"теории достаточно", но код всё же требуется

типа "я вообще-то не пью, но вы мне всё же налейте!"

вам какой код? с массивом, который с моими "музеями"?

понимаете ли, без реального массива с текстами опшенов код я делать не умею

@духачевский · 20.02.2016, 19:26 **[ТС]**

Шутка супер

Просто хочется взглянуть, да с вашими музеями будет супер.

@kalabuni · 20.02.2016, 22:54

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=windows-1251">
<title></title>
<style>
select {width: 234px; margin: 123px 2px}
</style>
 
<script>
onload = function ()
{
var arr = [
           ['Москва|2', 'Санкт-Петербург|3'],                                                     //0
           ['Киев|4', 'Одесса|5'],                                                                //1
           ['Третьяковская галерея', 'Алмазный фонд', 'Оружейная палата'],                        //2
           ['Эрмитаж', 'Кунсткамера', 'Музей артиллерии', 'Музей Ахматовой'],                     //3
           ['Музей Булгакова', 'Музей сновидений', 'Музей Чернобыля', 'Музей одной улицы'],       //4
           ['Музей истории евреев', 'Музей героической обороны', 'Музей коньячного дела Шустова'] //5
          ];
   function addOpt (selInd, arrInd)
 
   {
   for (var sel = document.getElementById ('s' + selInd), j = sel.options.length - 1; j > 0; j--) sel.options [j] = null;
   for (var t = arr [arrInd], j = 0, J = t.length; j < J; j++)
      {
      var opt = document.createElement ('option');
      var q = t [j].split ('|');
      opt.value = q [1]; opt.text = q [0]; sel.options.add (opt);
      }
   sel.disabled = 0;
   }
 
for (var sels = document.getElementsByTagName ('select'), j = 0, J = sels.length; j < J; j++)
   {
   sels [j].disabled = !!j;
   sels [j].id = 's' + j;
   if (j != J - 1) sels [j].onchange = function ()
      {
      if (!this.selectedIndex) for (var j = parseInt (this.id.substr (1)) + 1; j < J; j++) sels [j].selectedIndex = 0, sels [j].disabled = 1;
      else addOpt (parseInt(this.id.substr (1)) + 1, this.options [this.selectedIndex].value);
      }
   }
}
 
</script>
</head>
<body>
<select>
   <option>выберите страну</option>
   <option value="0">Россия</option>
   <option value="1">Украина</option>
</select>
 
<select>
   <option>выберите город</option>
</select>
 
<select>
   <option>выберите музей</option>
</select>
</body> 
</html>

https://jsfiddle.net/5e983bxk/2/

@духачевский · 20.02.2016, 22:56 **[ТС]**

Спасибо вам огромное)

@Goga5 · 22.02.2016, 10:21

Вот еще файл, где один select распадается на 3 значения.

@духачевский · 22.02.2016, 15:45 **[ТС]**

И вам тоже спасибо большое)

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57

	Поведение селекта 20.02.2016, 17:10. Показов 4167. Ответов 13 Метки нет (Все метки) Всем привет, ребята помогите решить непонятную мне задачу. Ничего не могу придумать для того что бы застилизовать как требуется селект. А именно вопрос такой. Существует несколько селект которые необходимо выбирать по порядку. Выбор вариантов последующего селект зависит от выбора варианта предыдущего. Так вот я хочу что бы изначально все селекты были "дизайблед" (и сам цвет фона у селект был серый), а уже при клике предоставлялось возможность выбрать "опшин" и цвет фона селекта стал например белым. Как это можно реализовать может кто подсказать пожалуйста? 0

@madzal 54 / 54 / 40 Регистрация: 22.08.2014 Сообщений: 424
	20.02.2016, 18:02
	если убрать disabled то будет белый фон ... что конкретно у вас не получается ? 0

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57
	20.02.2016, 18:17 [ТС]
	Я хочу что бы изначально select был disabled, и placeholder с пустым значением. Но была возможность кликать на него и выбирать значения option, после выбора какого то option это значение бы вставало на место placeholder и цвет фона у select стал бы белым. Прилагаю скрин что у меня есть сейчас Миниатюры 0

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57
	20.02.2016, 18:18 [ТС]
	Здесь смысл такой что от выбора option последующего select, будет зависеть от выбора предыдущего 0

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57
	20.02.2016, 18:50 [ТС]
	Да список у меня есть, но неужели он важен? Я хочу понять как такие селекты сделать. Если вам не трудно не могли бы объяснить пожалуйста) 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	20.02.2016, 19:01
	разумеется, важен -- каким образом, по-вашему, будут создаваться опшены во втором (третьем, четвёртом) селектах, если неизвестны их тексты? Или вам нужен чисто теоретический ответ? отвечаю: 1.каждый селект должен иметь первым приглашающий опшен (для моего примера выше -- "выберите страну", "выберите город", "выберите музей") 2. каждый селект, начиная со второго, должен быть "задисаблен" 3. на каждый селект "навешиваете" функцию на событие onchange эта функция определяет selectedIndex своей коллекции опшенов если он ненулевой, то следующий по списку селект становится "доступным" (и в нём формируются опшены, текст которых берётся из массива, который изначально сформирован на основе того самого "списка" выше если же нулевой, то все последующие селекты вновь "дисаблятся" Всё понятно? Без кода-примера разберётесь? Удачи! 0

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57
	20.02.2016, 19:09 [ТС]
	Спасибо, да в том то и дело что теории достаточно. Если вам не трудно то не могли бы код дать. На выходных хочу разобраться что бы на работе показать во вторник) Ну если конечно не затруднит 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	20.02.2016, 19:15
	Отлично! "теории достаточно", но код всё же требуется типа "я вообще-то не пью, но вы мне всё же налейте!" вам какой код? с массивом, который с моими "музеями"? понимаете ли, без реального массива с текстами опшенов код я делать не умею 0

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57
	20.02.2016, 19:26 [ТС]
	Шутка супер Просто хочется взглянуть, да с вашими музеями будет супер. 0

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57
	20.02.2016, 22:56 [ТС]
	Спасибо вам огромное) 0

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57
	22.02.2016, 15:45 [ТС]
	И вам тоже спасибо большое) 0

Поведение селекта

Решение