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

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.2	SELECT menus
4.01	17.6 The SELECT, OPTGROUP, and OPTION elements DTD: Transitional Strict Frameset
5.0	4.10.7 The select element
5.1	4.10.7. The select element
XHTML
1.0	Extensible HyperText Markup Language DTD: Transitional Strict Frameset
1. 1	Extensible 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 Пример Выпадающий список, расположенный вне формы (но все же являющийся ее частью):   Имя:  
 

Выберите автомобиль:
Вольво Saab Опель Ауди

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

---

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

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

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

---

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

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

---

Синтаксис

Значения атрибутов Значение Описание form_id Указывает элемент формы, которому принадлежит элемент . Значение этого атрибута должно быть равен атрибуту id элемента

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

---

❮ Тег HTML ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники Учебное пособие по HTML Учебное пособие по CSS Учебное пособие по JavaScript How To Tutorial SQL Tutorial Python Tutorial W3. CSS Tutorial Bootstrap Tutorial PHP Tutorial Java Tutorial C++ Tutorial jQuery Tutorial Top References HTML Reference CSS Reference JavaScript Reference SQL Reference Python Reference W3.CSS Reference Bootstrap Reference PHP Reference HTML Colors Java Reference Angular Reference jQuery Reference Лучшие примеры Примеры HTML Примеры CSS Примеры JavaScript Примеры инструкций Примеры SQL Примеры Python Примеры W3.CSS Примеры Bootstrap Примеры PHP Примеры Java Примеры XML Примеры jQuery 9002 FORUM | О W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности. Copyright 1999-2023 Refsnes Data. Все права защищены. W3Schools работает на основе W3.CSS. Атрибут HTML select size ❮ Тег HTML

Пример

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

Выберите автомобиль:

Вольво Saab Опель Ауди

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

---

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

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

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

---

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

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

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

---

Синтаксис

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

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

.

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

---

❮ Тег HTML ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники Учебник HTML Учебник CSS Учебник по JavaScript Как сделать учебник Учебник по SQL Учебник по Python Учебник по W3. CSS Учебник по Bootstrap Учебник по PHP Учебник по Java Учебник по C++ Учебник по jQuery Top References HTML Reference CSS Reference JavaScript Reference SQL Reference Python Reference W3.CSS Reference Bootstrap Reference PHP Reference HTML Colors Java Reference Angular Reference Справочник по jQuery Основные примеры Примеры HTML Примеры CSS Примеры JavaScript Примеры инструкций Примеры SQL Примеры Python Примеры W3.CSS Примеры Bootstrap Примеры PHP Примеры Java Примеры XML Примеры jQuery 9002 FORUM | О W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.Навигация по записямПредыдущая запись Как установить openserver: Документация / Open Server PanelСледующая запись Как переименовать ссылку вконтакте: Как изменить название и ссылку группы в вкДобавить комментарий Отменить ответВаш адрес email не будет опубликован. Обязательные поля помечены *Комментарий *

Имя *

Email *

Сайт