Поменять параметр display при выборе определенного пункта в select

@Last · Регистрация: 05.09.2011

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

Здравствуйте, беда схожая.
Ситуация следующая: есть выпадающий список, при выборе определенного пункта (в данный момент) надо поменять параметр display. Собсно все просто для человека знающего js
Я делаю это вот как-то так:

HTML5
1
2
3
4
5
6
<select class="manager_required" moslabel="Выбрать текст" mosreq="1" name="ad_text" id="ad_text">
<option value="">&nbsp;</option>
<option value="1">текст 1</option>
............
<option value="8">текст 8</option>
</select>

JavaScript
1
2
3
var objSel = document.getElementById('sd_ron');//sd_ron - id select`a
if ( getSelectedIndexes(objSel) == 8 ){
document.getElementById('sd_tnl').style.display = 'inline';} //sd_tnl - id дочернего select`a

Естественно не работает, иначе не писал бы. Говоря словами Чернышевского: Что делать?

@GuardCat · 17.10.2011, 15:28

Last, не пойму что за функция у вас «getSelectedIndexes». Что-то ваше?

У меня несколько вопросов:
1. Почему в HTML-коде примера id селекта у вас ad_text, а работаете вы с id sd_ron?
2. По какому событию вы вызываете свою функцию?

Вот работающий пример, так, как я понял задачу (поменял id селекта в функции, заменил несуществующую в нативном контексте функцию на стандартную работу с селектами). Пример, кстати, будет проще, если проверять не значение выбранного оптиона, а его номер. Обратите внимание на событие onchange, записанное в HTML-коде селекта.

HTML5
1
2
3
4
5
<select class="manager_required" moslabel="Выбрать текст" mosreq="1" name="ad_text" id="ad_text" onchange="changeDisplay()">
    <option value="">&nbsp;</option>
    <option value="1">текст 1</option>
    <option value="8">текст 8</option>
</select>

JavaScript
1
2
3
4
5
6
function changeDisplay() {
    var objSel = document.getElementById('ad_text');
    if (objSel[objSel.selectedIndex].value==8 ){
        document.getElementById('sd_tnl').style.display = 'inline';
    } //sd_tnl - id дочернего select`a
}

@Last · 17.10.2011, 17:35 **[ТС]**

Добавлено через 6 минут
Приношу свои извинения, в тот момент у меня видимо помутился рассудок. Теперь оно выглядит так:

HTML5
1
2
3
4
5
6
7
<select id="ad_raion" moslabel="Здесь написать" name="ad_raion" onchange="raioni()">
<option value="">&nbsp;</option>
<option value="1">текст 1</option>
<option value="2">текст 2</option>
.................................................
<option value="16">текст 16</option>
</select>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function raioni(){
    var objSel = document.getElementById('ad_raion');
    if ( getSelectedIndexes(objSel) != -1 ){
        if(objSel.options[objSel.selectedIndex].value == 8){
                        document.getElementById('tr_ad_raions').style.display   = '';
            document.getElementById('tr_ad_raions').style.visibility    = '';
        }
        else{
            document.getElementById('tr_ad_raions').style.display   = 'none';
            document.getElementById('tr_ad_raions').style.visibility    = 'hiden';
        }
    }
 
}

но грабли теже, никак не реагирует на выпадающий список.

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

Last, не пойму что за функция у вас «getSelectedIndexes». Что-то ваше?

getSelectedItem Получение текстовой строки, связанной с выделенным элементом
public String getSelectedItem();
Соглашусь строчка не актуально

@GuardCat · 18.10.2011, 09:26

Да уберите же вы getSelectedIndex и всё будет пучком (см. строку 3 в вашем листинге), не знает Javascript такой команды. Вот так работает:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function raioni(){
    var objSel = document.getElementById('ad_raion');
    if (objSel.selectedIndex != -1 ){
                if(objSel[objSel.selectedIndex].value == 8){
                        document.getElementById('tr_ad_raions').style.display = '';
                        //document.getElementById('tr_ad_raions').style.visibility = '';
                }
                else{
                        document.getElementById('tr_ad_raions').style.display = 'none';
                        //document.getElementById('tr_ad_raions').style.visibility = 'hiden';
                }
        }
 
}

Закомментированные строки не нужны, на мой взгляд (я так понимаю вы добавили их от безысходности).
И, кстати, слово «hidden» пишется с двумя «d». Слово «options» в строке 4 вашего листинга нахожу излишеством, хотя работает и так и так.

@Last · 18.10.2011, 10:34 **[ТС]**

Собственно ответ уже написан, но есть кое какие добавки.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Raioni(){
    var objSel   = document.getElementById('ad_raion');//обращаемся к select`у предку
    var objSelJr = document.getElementById('ad_raions');//обращемся к select`у потомку
                if(objSel[objSel.selectedIndex].value == 8){ //вслучае если в списке выбран пункт с value=8, изменяем стиль selecta потомка
                        document.getElementById('tr_ad_raions').style.display           = '';
                        document.getElementById('tr_ad_raions').style.visibility        = '';
                        document.getElementById('ad_raions').style.display           = '';
                        document.getElementById('ad_raions').style.visibility        = '';
 
                }
                else{
                        objSelJr[objSelJr.selectedIndex].value = ''; //в select`e потомке ставим указатель на пустую позицию, чтобы в БД не попала значение и скрываем select потомок
                        document.getElementById('tr_ad_raions').style.display           = 'none';
                        document.getElementById('tr_ad_raions').style.visibility        = 'hiden';
                        document.getElementById('ad_raions').style.display              = 'none';
                        document.getElementById('ad_raions').style.visibility           = 'hiden';
                }
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<td>
<select id="ad_raion" class="adsmanager_required" moslabel="Текст" mosreq="1" name="ad_raion" onchange="Raioni()">
<option value="">&nbsp;</option>
<option value="1">text 1</option>
................................................
<option value="19">text 19</option>
</select>
</td>
</tr>
<tr id="tr_ad_raions" style="display: none;">
<select id="ad_raions" class="adsmanager" moslabel="Тест" name="ad_raions" onchange="Raioni()" style="display: none;">
<option value="">&nbsp;</option>
<option value="1">test 1</option>
..............................................
<option value="1">test 9</option>
</select></td>

@GuardCat · 18.10.2011, 10:38

Не по теме:

Не называйте функцию, используя первую заглавную букву, если это не конструктор класса. Плохой тон в JS.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@GuardCat
	18.10.2011, 10:38
	Не по теме: Не называйте функцию, используя первую заглавную букву, если это не конструктор класса. Плохой тон в JS. 0