Показать второй select при выборе пункта в первом

@_Barsenal_ · Регистрация: 19.05.2012

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

Привет программистам!
Подскажите пожалуйста, вот у меня есть, к примеру, открывающийся список:

HTML5
1
2
3
4
5
6
7
<select>
        <option>В_1</option> 
        <option>В_2</option>
        <option>В_3</option>
</select>
<br>
<button>Кнопка</button>

Как мне сделать так, чтобы при выборе В_1 и нажатии на Кнопка у меня появлялся ниже другой список? Как бы продолжение. К примеру такой:

HTML5
1
2
3
4
5
<select>
        <option>В_1.1</option> 
        <option>В_1.2</option>
        <option>В_1.3</option>
</select>

@and_y87 · 31.08.2012, 13:49

_Barsenal_,
Можно сделать зарание все селекты и просто менять им свойство

CSS
1
display: none

на

CSS
1
display: block

Это самый простой метод...

Метод сложнее JS - Подгружать селекты по хожу дела... (при выборе option)

@_Barsenal_ · 31.08.2012, 13:55 **[ТС]**

Не мог бы ты на примере показать?

@and_y87 · 31.08.2012, 18:18

_Barsenal_, Мог бы...
пишу первый пример...

Добавлено через 36 минут
Вот вам пример... на его основе можно сделать впринципе...

Тут HTML код страницы

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
64
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $("#select1").change(function () {
        var x = $('select option:selected').attr('name');
        $('#step2').find('select').css('display','none');
        $('#'+x).css('display','block');
    })
});
</script>
<style>
#step2 select{
    display:none;
}
</style>
</head>
 
<body>
 
<select id="select1">
    <option selected disabled>Выбирите</option>
    <option name="select1_step2">А</option>
    <option name="select2_step2">a</option>
    <option name="select3_step2">1</option>
    <option name="select4_step2">I</option>
</select>
 
<div id="step2">
<select id="select1_step2">
    <option selected disabled>Выбирите</option>
    <option>А</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
</select>
<select id="select2_step2">
    <option selected disabled>Выбирите</option>
    <option>a</option>
    <option>b</option>
    <option>c</option>
    <option>d</option>
</select>
<select id="select3_step2">
    <option selected disabled>Выбирите</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
<select id="select4_step2">
    <option selected disabled>Выбирите</option>
    <option>I</option>
    <option>II</option>
    <option>III</option>
    <option>IV</option>
</select>
</div>
</body>
</html>

Тут пример работы

Добавлено через 2 минуты
P.S. Скрипт не универсален!
Я просто покзал логику, какой её вижу Я...

@_Barsenal_ · 01.09.2012, 07:59 **[ТС]**

спасибо тебе огромное!

@and_y87 · 01.09.2012, 13:57

Не по теме:

_Barsenal_, :friends:

@SlavAz · 01.09.2012, 14:57

Причем здесь вебдизайн?

Не по теме:

_Barsenal_, Барселона Арсенал? )

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита табличной части. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@_Barsenal_ 0 / 0 / 0 Регистрация: 19.05.2012 Сообщений: 11
	31.08.2012, 13:55 [ТС]
	Не мог бы ты на примере показать? 0

@_Barsenal_ 0 / 0 / 0 Регистрация: 19.05.2012 Сообщений: 11
	01.09.2012, 07:59 [ТС]
	спасибо тебе огромное! 0

@and_y87
	01.09.2012, 13:57
	Не по теме: _Barsenal_, :friends: 0

@SlavAz ѪѦѢ 599 / 168 / 5 Регистрация: 19.08.2011 Сообщений: 665 Записей в блоге: 3
	01.09.2012, 14:57
	Причем здесь вебдизайн? Не по теме: _Barsenal_, Барселона Арсенал? ) 0