Поменять параметр 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.

Новые блоги и статьи Все статьи Все блоги /
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .

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