Разное

Html список выбора: Атрибут disabled | htmlbook.ru

09.07.2023

javascript — Как изменять второй список в зависимости от выбора в первом?

есть код:

<form method="post">
   <p><select size="5">
   <option disabled>Выберите страну</option>        
   <option>Австралия</option>       
   <option>Австрия</option>
   <option>Англия</option>
   <option>Аргентина</option>
   <option>Беларусь</option>
   <option>Бельгия</option>
   <option>Болгария</option>
   </select></p>
 </form>

Как сделать, чтобы при выборе, например «Австралия», в другом выпадающем списке отображались лиги? Соответственно в разной стране — разные лиги, а значит и разный список.

Я так понимаю, что можно через массивы, вызывая из ячейки html код заполненного списка, в зависимости от выбранного id элемента списка. Но как это правильно сделать?

  • javascript
  • html
  • html-select

6

Вот пример на 3 зависимых друг от друга списка:

Страна: <select>
<option value="0">- выберите страну -</option>
<option value="1">Россия</option>
<option value="2">Украина</option>
<option value="3">Белорусь</option>
</select>
<br>Регион: 
<select disabled>
<option value="0">- Выберите регион -</option>
</select></td><td>
<br>Город: 
<select disabled>
<option value="0">- Выберите город -</option>
</select>
<script>
var all_regions=[];
var all_cites=[[],[],[]];
 
all_regions[0]=["московская обл","ростовская обл","саратовская обл"];
all_regions[1]=["киевская обл","львовская обл","харьковская обл"];
all_regions[2]=["минская обл","брестская обл","гроднинская обл"];
 
all_cites[0][0]=["Москва","Химки","Калуга"];
all_cites[0][1]=["Такой-то город","Такой-то город","Калуга"];
all_cites[0][2]=["Такой-то город","Такой-то город","Такой-то город"];
 
all_cites[1][0]=["Киев","Жмеринка","Бердычев"];
all_cites[1][1]=["Львов","Сокаль","Стрый"];
all_cites[1][2]=["Харьков","Полтава","Пирятин"];
 
all_cites[2][0]=["Минск","Такой-то город","Такой-то город"];
all_cites[2][1]=["Брест","Такой-то город","Такой-то город"];
all_cites[2][2]=["Гродно","Такой-то город","Вильно"];
 
country_id.
 
 
 onchange=function(){
region_id.disabled=false;
region_id.innerHTML="<option value='0'>- Выберите регион -</option>";
myregion=this.value-1;
if(myregion!=-1){
    for(var i=0;i<all_regions[myregion].length;i++){
        region_id.innerHTML+='<option value="'+(i+1)+'">'+all_regions[myregion][i]+'</option>';
    }
}else{
    region_id.disabled=true;
    city_id.disabled=true;
}
}
 
region_id.onchange=function(){
city_id.disabled=false;
city_id.innerHTML="<option value='0'>- Выберите город -</option>";
var mycite=this.value-1;
if(mycite!=-1){
    for(var i=0;i<all_cites[myregion][mycite].length;i++){
        city_id.innerHTML+='<option value="'+(i+1)+'">'+all_cites[myregion][mycite][i]+'</option>';
    }
}else{
    city_id.disabled=true;
}
}
</script>

4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

HTML/Элемент select

Синтаксис

(X)HTML

<select> . .. </select>

Описание

Элемент select (от англ. «select» ‒ «выбирать») создаёт раскрывающееся меню. В select можно вкладывать пункты раскрывающегося списка и элементы группировки пунктов. При этом ширина списка определяется шириной самого большого текста вложенного в дочерний элемент option. Элемент select, как правило, помещается в форму или присоединяется к ней.

Примечание

Если ни один из элементов меню не выбран, то при отправке данных формы ни какие значения данного меню не отправляются.

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.Раздел
HTML
2.0		Selection: SELECTПеревод
3.2SELECT menus
4.0117.6 The SELECT, OPTGROUP, and OPTION elements
DTD: Transitional Strict Frameset
5.04.10.7 The select element
5.14.10.7. The select element
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1. 1Extensible HyperText Markup Language

Атрибуты

autofocus
Указывает браузеру, что элемент должен получить фокус после загрузки страницы.
disabled
Блокирует раскрываюшийся список.
form
Присоединяет элемент к форме.
multiple
Добавляет возможность множественного выбора.
name
Присваивает списку уникальное имя.
required
Указывает на обязательность выбора элементов списка.
size
Указывает количество элементов списка, которые должны быть отображены.
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода

<!DOCTYPE html>
<html>

<head>
<meta charset=»utf-8″>
<title>Элемент select</title>
</head>
<body>
<h2>Пример использования элемента «select»</h2>
<label>Выберете XHTML спецификацию:
<select>
<option>XHTML 1. 0</option>
<option>XHTML 1.1</option>
</select>
</label>
</body>
</html>

Элемент select

Атрибут формы HTML5 select

❮ Тег HTML5
 


Попробуйте сами »

Определение и использование

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

Значение этого атрибута должно быть равно атрибуту id <форма> элемент в том же документе.

Поддержка браузера

Атрибут
форма Да Да Да Да Да

Синтаксис

. Значение этого атрибута должно быть равен атрибуту id элемента

в том же документе.

❮ Тег HTML

Пример

Выпадающий список с тремя видимыми параметрами:

Попробуйте сами »

Определение и использование

Атрибут размера указывает количество видимых параметров в раскрывающемся списке.

Если значение атрибута size больше 1, но меньше общее количество опций в списке, браузер добавит полосу прокрутки к указать, что есть дополнительные параметры для просмотра.

Поддержка браузера

Атрибут
размер Да Да Да Да Да

Примечание. В Chrome и Safari этот атрибут может не работать, т.к. ожидается для size="2" и размер = "3" .

Синтаксис

<выбрать размер=" номер «>

Значения атрибутов

.
Значение Описание
номер Количество видимых опций в выпадающем списке. Значение по умолчанию — 1. Если присутствует множественный атрибут, значение по умолчанию — 4

❮ Тег HTML