Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Заработок на разработке сайтов, фриланс, своя страничка в интернете, заработать в Интернете на написании сайтов, веб мастер, вебмастер, веб программист, вебпрограммист.

Заработок в Интернет.
Удаленная работа на дому.
Все о надомной работе.

Выпадающий список html: Атрибут form | htmlbook.ru

Добавлено автор alexxlab

Содержание

Атрибут multiple | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

Наличие атрибута multiple сообщает браузеру отображать содержимое элемента <select> как список множественного выбора. Конечный вид списка зависит от используемого атрибута size и браузера. При size=»1″ Firefox устанавливает высоту списка равной одному пункту, Safari и Chrome игнорируют size, Opera превращает список в «крутилку».

Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

ЧебурашкаКрокодил ГенаШапоклякКрыса ЛарисаЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Атрибут size отсутствуетАтрибут size равен 1

Синтаксис

HTML
<select multiple>. ..</select>
XHTML
<select multiple="multiple">...</select>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT, атрибут multiple</title>
 </head>
 <body>

  <form action="handler.php">
    <p><select multiple size="1">
    <option>Чебурашка</option>
    <option>Крокодил Гена</option>
    <option>Шапокляк</option>
    <option>Крыса Лариса</option>
    </select></p>
  </form>

 </body>
</html>

Тег select — выпадающий список

Тег select создает выпадающий список для использования в HTML формах.

Отдельный пункт списка должен храниться в теге option.

Атрибуты

АтрибутОписание
multiple Наличие данного атрибута создает мультиселект — выпадающий список, в котором можно выбрать несколько пунктов, зажав клавишу контрол (Ctrl) или выделив их мышкой.
Необязательный атрибут. Пользоваться так: <select multiple> или так <select multiple=»multiple»>.
name Имя выпадающего списка. Нужно для того, чтобы достать данные поля ввода в PHP. Для корректной работы формы имена полей ввода не должны совпадать друг с другом (в одной форме). Если они совпадают — в PHP придут данные того поля ввода, которое ниже в HTML коде.

Пример

Давайте посмотрим, как работает выпадающий список:

<select> <option>Москва</option> <option>Минск</option> <option>Киев</option> <option>Лондон</option> </select>

:

Пример

Давайте ширину выпадающего списка сделаем равной ширине самого большого элемента (если она не будет явно указана с помощью CSS свойства width):

<select> <option>Москва - столица России</option> <option>Минск</option> <option>Киев</option> <option>Лондон</option> </select>

:

Пример .

Выбор по умолчанию

А теперь давайте попробуем выбрать по умолчанию город Минск. Сделаем это с помощью атрибута selected:

<select> <option>Москва - столица России</option> <option selected>Минск</option> <option>Киев</option> <option>Лондон</option> </select>

:

Пример . Мультиселект

Давайте теперь превратим обычный select в мультиселект с помощью атрибута multiple. Для этого зажмем клавишу контрол (ctrl) и, не отпуская ее, можем выбрать несколько пунктов выпадающего списка. Или же просто выделим мышкой несколько пунктов (зажмием левую кнопку и выделяем).

<select multiple name="city[]"> <option>Москва - столица России</option> <option>Минск</option> <option>Киев</option> <option>Лондон</option> </select>

:

Пример .

Несколько значений по умолчанию в мультиселекте

А теперь, в мультиселекте по умолчанию, попробуем выбрать более, чем одно значение:

<select multiple name="city[]"> <option>Москва - столица России</option> <option selected>Минск</option> <option>Киев</option> <option selected>Лондон</option> </select>

:

Смотрите также

  • атрибут selected,
    который задает выбранный по умолчанию пункт списка
  • тег optgroup,
    который группирует пункты списка
  • тег datalist,
    который создает выпадающий список

Создаем стильные выпадающие списки

В этой статье мы покажем, как создавать красивые выпадающие списки без использования изображений, только при помощи CSS. Также мы добавим немного кода jQuery, чтобы заставить их работать.

Обратите внимание на некоторые вещи, прежде чем мы начнем:

  • В примерах кода пропущены префиксы браузеров для CSS-свойств, но вы, конечно, можете найти их в исходных файлах.
  • Лично я использую бокс-модель, где [width] = [element-width] + [padding] + [borders]. Чтобы её активировать, необходим следующий фрагмент кода:

*,
*:after,
*:before {
    box-sizing: border-box;
}

Итак, с чего же мы начнем.

Первый вопрос: что нам нужно для создания выпадающего меню? В общем, мы будем использовать блок DIV с вложенным тегом span и неупорядоченный список для выпадающего меню:

<div>
    <span>I’m kinda the label!</span>
    <ul>
        <li>I’m hidden!</li>
        <li>Me too!</li>

        <li>So do I.</li>
    </ul>
</div>

JavaScript

Нам нужнен небольшой JavaScript, чтобы наш выпадающий список работал как нужно. Этот фрагмент JS мы будем использовать для всех примеров:

//…
 
obj.dd.on(‘click’, function(event){
    $(this).toggleClass(‘active’);
    return false;
});
 
//…
 
$(function() {
 
    var dd = new DropDown( $(‘#dd’) );
 
    $(document).click(function() {
        // all dropdowns

        $(‘.wrapper-dropdown-1’).removeClass(‘active’);
    });
 
});

Так что же это скрипт делает? Во-первых, он переключает класс .active, когда вы кликаете на враппер. Это означает, что если враппер не имеет класс .active, то он добавляется, а если этот класс уже присвоен, то он удаляется.

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

Что ж, теперь мы понимаем, как это работает, я думаю, пришло время для создания примеров!

Пример 1

Давайте начнем с чего-нибудь простого: простой раскрывающийся список для указания пола.

Давайте сначала посмотрим на разметку:

HTML-разметка

Нам нужно несколько вещей: обертка (div с id#dd), (скрытый) раскрывающийся список и «лейбл», который будет обернут тегом span. Мы используем ссылки-якоря, потому что мне кажется так будет семантически правильно, но вы можете также использовать другой тег.

<div tabindex=»1″>
    <span>Пол</span>
    <ul>
        <li><a href=»#»>Мужской</a></li>
        <li><a href=»#»>Женский</a></li>
    </ul>
</div>

CSS

Давайте теперь перейдем к CSS. Начнем с обертки (враппера):

.wrapper-dropdown {
    /* размер и положение */
    position: relative; /* Enable absolute positioning for children and pseudo elements */
    width: 200px;
    padding: 10px;
    margin: 0 auto;
 
    /* цвет и фон */
    background: #9bc7de;
    color: #fff;
    outline: none;
    cursor: pointer;
 
    /* шрифт */
    font-weight: bold;
}

Итак, мы сделали несколько вещей. Сначала мы установили ширину списка и некоторые отступы. Далее, мы задали ему цвет и фон. И, наконец, мы установили параметры для шрифта.

Давайте закончим с «лейблом», добавив небольшую стрелку справа при помощи псевдо-элемента.

.wrapper-dropdown:after {
    content: «»;
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -6px;
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent #fff;  
}

Я думаю, мы все знаем, как создать маленький треугольник на CSS при помощи бордера (границы). Это конечно хак, но если он работает очень хорошо, так почему бы и нет? Там нет ничего особенного: маленькая белая стрелка справа.

Итак, у нас есть симпатичная небольшая кнопка, но без раскрывающегося содержания она имеет никакого смысла. Давайте разберемся с нашим списком!

.wrapper-dropdown-1 .dropdown {
    /* Size &amp; position */
    position: absolute;
    top: 100%;
    left: 0; /* Size */
    right: 0; /* Size */
 
    /* Styles */
    background: #fff;
    font-weight: normal; /* Overwrites previous font-weight: bold; */
 
    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

Мы зададим раскрывающемуся списку абсолютное позиционирование и разместим его позади кнопки (top: 100%;). Зададим ему такую же ширину, как для кнопки. И, наконец, скроем его, уменьшив его прозрачность до 0.

Теперь зададим стили для элементов списка:

.wrapper-dropdown-1 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #9e9e9e;
    padding: 10px 20px;
}
 
/* Hover state */
.wrapper-dropdown-1 .dropdown li:hover a {
    background: #f3f8f8;
}

С помощью JavaScript мы будем переключать класс .active, когда мы нажимаем на кнопку, на основе этого класса мы можем изменить наш CSS для отображения раскрывающегося списка.

/* Active state */
.wrapper-dropdown-1.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}
 
.wrapper-dropdown-1.active:after {
    border-color: #9bc7de transparent;
    border-width: 6px 6px 0 6px ;
    margin-top: -3px;
}
 
.wrapper-dropdown-1.active {
  background: #9bc7de;
  background: linear-gradient(to right, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
}

Три вещи, которые необходимо отметить:

  1. Во-первых, мы делаем выпадающий список видимым, изменив его прозрачность до 1.  
  2. Далее, мы меняем направление и цвет маленькой стрелки.
  3. Затем мы изменим фон позади стрелки с помощью градиента.

JavaScript

Последнее, но не менее важное, мы также должны добавить еще один фрагмент JavaScript, чтобы кнопка отображала выбранное значение.

function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children(‘span’);
    this.opts = this.dd.find(‘ul.dropdown > li’);
    this.val = »;
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj.dd.on(‘click’, function(event){
            $(this).toggleClass(‘active’);
            return false;
        });
 
        obj.opts.on(‘click’,function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(‘Gender: ‘ + obj. val);
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

Очень простой код: при нажатии на элемент мы получаем его значение и отображаем его в теге span.

Пример 2

Во втором примере мы создадим красивое меню для регистрации в различных социальных сетях.

HTML-разметка

<div>Регистрация
    <ul>
        <li><a href=»#»><i></i>Twitter</a></li>
        <li><a href=»#»><i></i>Github</a></li>
        <li><a href=»#»><i></i>Facebook</a></li>
    </ul>
</div>

Теги <i> используются для отображения маленьких иконок из FontAwesome. Я не буду объяснять что такое FontAwesome здесь, потому как об этом уже было не раз сказано в предыдущих статьях. Просто убедитесь, что это работает.

CSS

Давайте начнем с обертки. В значительной степени она такая же, как и обертка в предыдущем примере. Обратите внимание на левую границу в 5px.

.wrapper-dropdown-2 {
    /* Size and position */
    position: relative; /* Enable absolute positioning for children and pseudo elements */
    width: 200px;
    margin: 0 auto;
    padding: 10px 15px;
 
    /* Styles */
    background: #fff;
    border-left: 5px solid grey;
    cursor: pointer;
    outline: none;
}

Теперь маленькая стрелка. Точно такая же, как раньше:

.wrapper-dropdown-2:after {
    content: «»;
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: grey transparent;
}

А это раскрывающийся список. Опять же, в значительной степени такой же, как и в предыдущем примере:

. wrapper-dropdown-2 .dropdown {
  /* Size &amp; position */
    position: absolute;
    top: 100%;
    left: -5px;
    right: 0px;
 
    /* Styles */
    background: white;
    transition: all 0.3s ease-out;
    list-style: none;
 
    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

Обратите внимание, что мы будем использовать переход, чтобы сделать раскрывающийся список постепенно появляющимся (анимированным), а не просто открывающимся, как в первом демо.

Некоторые стили для ссылок и иконок:

.wrapper-dropdown-2 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #333;
    border-left: 5px solid;
    padding: 10px;
    transition: all 0.3s ease-out;
}
 
.wrapper-dropdown-2 .dropdown li:nth-child(1) a {
    border-left-color: #00ACED;
}
 
.wrapper-dropdown-2 .dropdown li:nth-child(2) a {
    border-left-color: #4183C4;
}
 
. wrapper-dropdown-2 .dropdown li:nth-child(3) a {
    border-left-color: #3B5998;
}
 
.wrapper-dropdown-2 .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}
 
/* Hover state */
 
.wrapper-dropdown-2 .dropdown li:hover a {
    color: grey;
}

И теперь, займемся стилями списка в раскрытом состоянии. Изменим направление стрелки, а раскрывающийся список станет видимым.

.wrapper-dropdown-2.active:after {
    border-width: 0 6px 6px 6px;
}
 
.wrapper-dropdown-2.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

JavaScript

function DropDown(el) {
    this.dd = el;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj.dd.on(‘click’, function(event){
            $(this).toggleClass(‘active’);
            event.stopPropagation();
        });
    }
}

Пример 3

Перейдем к третьему примеру, в данном случае выбранный пункт будет заменять собой значение по умолчанию.

HTML-разметка

<div tabindex=»1″>
    <span>Транспорт</span>
    <ul>
        <li><a href=»#»><i></i>Почта</a></li>
        <li><a href=»#»><i></i>UPS доставка</a></li>
        <li><a href=»#»><i></i>Частный самолет</a></li>
    </ul>
</div>

Кода не намного больше, чем раньше. Перейдем к CSS!

CSS

.wrapper-dropdown-3 {
    /* Size and position */
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 10px;
 
    /* Styles */
    background: #fff;
    border-radius: 7px;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 1px rgba(50,50,50,0.1);
    cursor: pointer;
    outline: none;
 
    /* Font settings */
    font-weight: bold;
    color: #8AA8BD;
}

Здесь мы используем границы, тени для блоков и закругленные углы. Нам также нужна маленькая стрелка:

.wrapper-dropdown-3:after {
    content: «»;
    width: 0;
    height: 0;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #8aa8bd transparent;
}

Тут все также, как и раньше, так что не будем описывать код подробно.

.wrapper-dropdown-3 .dropdown {
  /* Size &amp; position */
    position: absolute;
    top: 140%;
    left: 0;
    right: 0;
 
    /* Styles */
    background: white;
    border-radius: inherit;
    border: 1px solid rgba(0,0,0,0.17);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    font-weight: normal;
    transition: all 0.5s ease-in;
    list-style: none;
 
    /* Hiding */
    opacity: 0;
    pointer-events: none;
}
 
.wrapper-dropdown-3 .dropdown li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #8aa8bd;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
    transition: all 0. 3s ease-out;
}
 
.wrapper-dropdown-3 .dropdown li i {
    float: right;
    color: inherit;
}
 
.wrapper-dropdown-3 .dropdown li:first-of-type a {
    border-radius: 7px 7px 0 0;
}
 
.wrapper-dropdown-3 .dropdown li:last-of-type a {
    border-radius: 0 0 7px 7px;
    border: none;
}
 
/* Hover state */
 
.wrapper-dropdown-3 .dropdown li:hover a {
    background: #f3f8f8;
}

Все выглядит замечательно, за исключением маленькой стрелки в верхней правой части раскрывающегося списка. Эта стрелка важна: без неё, выпадающий список выглядит как будто он плавает без какой-либо связи с кнопкой.

.wrapper-dropdown-3 .dropdown:after {
    content: «»;
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;  
}
 
.wrapper-dropdown-3 . dropdown:before {
    content: «»;
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) transparent;  
}

Мы использовали два псевдо-элемента для этой стрелки, так как мы хотим создать границу вокруг неё.

Теперь стили для раскрытого состояния. Все одно и то же. Тем не менее, обратите внимание, что мы установили переход к .dropdown немного дольше, чем обычно (0,5 вместо 0,3 с). Таким образом, открытие меню будет очень гладким.

.wrapper-dropdown-3.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

JavaScript

Чтобы закончить этот демо-пример, мы должны добавить немного JavaScript, чтобы заменить значение выбранной кнопки по умолчанию. Мы видели, как это делается в первом примере, но, поскольку мы не оставляем слово «Транспорт» здесь, то JS немного отличается.

function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children(‘span’);
    this.opts = this.dd.find(‘ul.dropdown > li’);
    this.val = »;
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj.dd.on(‘click’, function(event){
            $(this).toggleClass(‘active’);
            return false;
        });
 
        obj.opts.on(‘click’,function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

Пример 4

Выглядит по-другому, не так ли? Здесь мы создадим список обязательных дел, которые можно отметить и тем самым вычеркнуть. В общем ничего особенного, но этот пример значительно отличается от предыдущих демонстраций.

HTML-разметка

<div>Сделать
    <ul>
        <li><input type=»checkbox» name=»el-1″ value=»donut»><label for=»el-1″>Съесть пирожок</label></li>
        <li><input type=»checkbox» name=»el-2″ value=»neighbour»><label for=»el-2″>Следить за соседями</label></li>
        <li><input type=»checkbox» name=»el-3″ value=»T-rex»><label for=»el-3″>Покормить кота</label></li>
    </ul>
</div>

Здесь нибудет ни ссылок, ни значков. Для каждого элемента, у нас есть две тега: чекбокс с лейблом.

CSS

.wrapper-dropdown-4 {
    /* Size and position */
    position: relative;
    width: 270px;
    margin: 0 auto;
    padding: 10px 10px 10px 30px;
 
    /* Styles */
    background: #fff;
    border: 1px solid silver;
    cursor: pointer;
    outline: none;
}

Мы используем отступ слева, чтобы создать достаточно места для красных линий. Теперь, маленькая стрелка справа:

.wrapper-dropdown-4:after {
    content: «»;
    width: 0;
    height: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #ffaa9f transparent;
}

Стили для выпадающего списка такие же, как и в предыдущих примерах:

.wrapper-dropdown-4 .dropdown {
    /* Size &amp; position */
    position: absolute;
    top: 100%;
    margin-top: 1px; /* border of wrapper */
    left: -1px;
    right: -1px;
 
    /* Styles */
    background: white;
    border: 1px solid silver;
    border-top: none;
    list-style: none;
    transition: all 0.3s ease-out;
   
    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

Мы должны установить margin-top равный 1px, потому что мы должны немного сдвинуть его вниз из-за границы обертки.

.wrapper-dropdown-4 .dropdown li {
    position: relative; /* Enable absolute positioning for checkboxes */
}
 
.wrapper-dropdown-4 .dropdown li label {
    display: block;
    padding: 10px 10px 10px 30px; /* Same padding as the button */
    border-bottom: 1px dotted #1ccfcf;
    transition: all 0.3s ease-out;
}
 
.wrapper-dropdown-4 .dropdown li:last-of-type label {
    border: none;
}
 
.wrapper-dropdown-4 .dropdown li input /* Checkboxes */ {
    position: absolute;
    display: block;
    right: 10px;
    top: 50%;
    margin-top: -8px;
}
 
/* Hover state */
 
.wrapper-dropdown-4 .dropdown li:hover label {
    background: #f0f0f0;
}
 
/* Checked state */
 
.wrapper-dropdown-4 .dropdown li input:checked ~ label {
    color: grey;
    text-decoration: line-through;
}

Чекбоксы имеют абсолютное позиционирование и размещены справа по середине на каждой линии, но так как они связаны с лейблами, то вы можете нажать в любом месте пункта, чтобы отметить их.

Когда флажок установлен, текст становится серым и перечеркнутым. Просто, но эффективно.

У нас есть еще две тонкие красные линии слева в нашей маленькой записной книжке. Есть два способа сделать это: один с псевдо-элементами и один с градиентами. Давайте посмотрим на оба варианта.

/* красные линии с псевдо-элементами */
.wrapper-dropdown-4 .dropdown:before,
.wrapper-dropdown-4:before {
    content: «»;
    width: 4px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 15px;
    border: 1px solid #ffaa9f;
    border-top: none;
    border-bottom: none;
    z-index: 2;
}
 
/* Или: */
/* красные линии при помощи градиента */
 
.wrapper-dropdown-4 .dropdown,
.wrapper-dropdown-4 {
  background: linear-gradient(left, white 5%, #ffaa9f 5%, #ffaa9f 5.3%, white 5.3%, white 6.5%, #ffaa9f 6.5%, #ffaa9f 6.8%, white 6.8%);
}
 
.wrapper-dropdown-4 .dropdown li:hover label {
  background: linear-gradient(left, #f0F0F0 5%, #ffaa9f 5%, #ffaa9f 5. 3%, #f0F0F0 5.3%, #f0F0F0 6.5%, #ffaa9f 6.5%, #ffaa9f 6.8%, #f0F0F0 6.8%);
}

Так какой из этих способов лучше? Вероятно, первый, потому что, если вы хотите изменить эффект при наведении на элементы списка, вы должны изменить градиент, что довольно непросто. Кроме того, псевдо-элементы лучше поддерживаются браузерами (начиная с IE8), в отличии от градиентов (не поддерживаются до IE10).

Теперь стили для раскрытого состояния. Ничего нового здесь нет.

/* Active state */
 
.wrapper-dropdown-4.active:after {
    border-width: 0 6px 6px 6px;
}
 
.wrapper-dropdown-4.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

JavaScript

function DropDown(el) {
    this.dd = el;
    this.opts = this.dd.find(‘ul.dropdown > li’);
    this.val = [];
    this.index = [];
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj. dd.on(‘click’, function(event){
            $(this).toggleClass(‘active’);
            event.stopPropagation();
        });
 
        obj.opts.children(‘label’).on(‘click’,function(event){
            var opt = $(this).parent(),
                chbox = opt.children(‘input’),
                val = chbox.val(),
                idx = opt.index();
 
            ($.inArray(val, obj.val) !== -1) ? obj.val.splice( $.inArray(val, obj.val), 1 ) : obj.val.push( val );
            ($.inArray(idx, obj.index) !== -1) ? obj.index.splice( $.inArray(idx, obj.index), 1 ) : obj.index.push( idx );
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

Пример 5

Наш последний пример будет похож на выпадающее меню в некоторых админ-панелях. Для этого мы будем использовать анимацию, когда мы переключаем его. Вместо появления/исчезновения, он будет скользить вверх и вниз.

HTML-разметка

<div tabindex=»1″>Иван Иванов
    <ul>
        <li><a href=»#»><i></i>Профиль</a></li>
        <li><a href=»#»><i></i>Настройки</a></li>
        <li><a href=»#»><i></i>Выйти</a></li>
    </ul>
</div>

CSS

.wrapper-dropdown-5 {
    /* Size &amp; position */
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 12px 15px;
 
    /* Styles */
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease-out;
}
 
.wrapper-dropdown-5:after { /* Little arrow */
    content: «»;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #4cbeff transparent;
}

Это основные стили. Теперь перейдем к раскрывающемуся списку, который немного отличается от обычного.

.wrapper-dropdown-5 .dropdown {
    /* Size &amp; position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
 
    /* Styles */
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    transition: all 0.3s ease-out;
 
    /* Hiding */
    max-height: 0;
    overflow: hidden;
}

На этот раз мы не изменяли непрозрачность до 0, чтобы скрыть меню. Мы установили max-height равную 0 и overflow: hidden. Почему установили max-height, а не height? Потому что мы не знаем точную высоту раскрытого списка.

Простые стили для элементов списка.

.wrapper-dropdown-5 .dropdown li {
    padding: 0 10px ;
}
 
.wrapper-dropdown-5 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 10px 0;
    transition: all 0. 3s ease-out;
    border-bottom: 1px solid #e6e8ea;
}
 
.wrapper-dropdown-5 .dropdown li:last-of-type a {
    border: none;
}
 
.wrapper-dropdown-5 .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}
 
/* Hover state */
 
.wrapper-dropdown-5 .dropdown li:hover a {
    color: #57a9d9;
}

А теперь, в активном состоянии:

/* Active state */
 
.wrapper-dropdown-5.active {
    border-radius: 5px 5px 0 0;
    background: #4cbeff;
    box-shadow: none;
    border-bottom: none;
    color: white;
}
 
.wrapper-dropdown-5.active:after {
    border-color: #82d1ff transparent;
}
 
.wrapper-dropdown-5.active .dropdown {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}

Когда выпадающий список открыт, мы меняем нижние углы кнопки, ее цвет, направление стрелки и цвет стрелки и удаляем её тень и границы.
И, чтобы показать меню, мы устанавливаем max-height выпадающего списка равную 400 пикселей. Мы могли бы установить её равную 500px или 1000px, это не имеет значения.

JavaScript

function DropDown(el) {
    this.dd = el;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;
 
        obj.dd.on(‘click’, function(event){
            $(this).toggleClass(‘active’);
            event.stopPropagation();
        });
    }
}

Обратная совместимость

Итак, теперь у нас есть 5 раскрывающихся списков, которые замечательно работают, но как насчет старых браузеров?
Эти браузеры не понимают, например, свойство opacity.

В этом нам поможет библиотека Modernizr. Грубо говоря, для тех, кто не знает, Modernizr это библиотека JavaScript, которая обнаруживает поддерживаемые HTML5 и CSS3 свойства в браузер пользователя.

Благодаря этому, мы можем «указать» браузеру, если вы не поддерживаете *это* свойство, то делайте следующее. Ниже приведен пример того, как мы можем управлять стилями для браузеров, которые не поддерживают определенные свойства CSS:

/* Нет поддержки CSS3 */
 
.no-opacity       .wrapper-dropdown-1 .dropdown,
.no-pointerevents .wrapper-dropdown-1 .dropdown {
    display: none;
    opacity: 1; /* If opacity support but no pointer-events support */
    pointer-events: auto; /* If pointer-events support but no pointer-events support */
}
 
.no-opacity       .wrapper-dropdown-1.active .dropdown,
.no-pointerevents .wrapper-dropdown-1.active .dropdown {
    display: block;
}

Если браузер не поддерживает opacity или pointer-events, то используется свойство display: block;. Ну и так далее.

Заключение.

Я надеюсь, что эта статья помогла вам понять, как создавать пользовательские раскрывающиеся меню. Как вы можете видеть, это довольно просто.

Демонстрация

Скачать исходные файлы

Перевод статьи с tympanus. net/codrops


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Узнаем как изготовить выпадающий список в HTML

Простейший выпадающий список в HTML легко создать, используя тег select. Это тег-контейнер, в него вкладываются теги option – именно они задают элементы списка.

Есть несколько вариантов списков, которые можно сделать с помощью тега select: раскрывающийся список (варианты выпадают после клика на основном поле или наведения на него курсора) и список множественного выбора – в нем пользователь может выбрать несколько пунктов. Первые более распространены, они являются значимым элементом навигации современных сайтов. Выпадающий список множественного выбора можно применить, например, в каталогах, где нужно выбрать несколько характеристик товара.

Изменять внешний вид и свойства списков можно с помощью универсальных и специальных атрибутов.

Атрибуты тега select

1. Multiple – задает множественный выбор.

2. Size – задает количество видимых строк в списке, то есть высоту. И тут все зависит от того, присутствует атрибут multiple или нет. Если да, и вы не указываете size, то при наличии multiple пользователь увидит все возможные варианты выбора, если же multiple отсутствует, то показана будет всего одна строчка, а остальные посетитель сможет прочитать, когда нажмет на значок лифта с правой стороны. Если же высота size задана и она меньше количества вариантов, то справа появится полоса прокрутки.

3. Name – имя. Выпадающий список может обойтись и без него, но оно может быть необходимым для взаимодействия с программой-обработчиком на сервере. Как правило, имя все-таки указывают.

Тег select не имеет обязательных атрибутов в отличие от тега option.

Атрибуты вложенного тега option

  1. Selected – предназначен для выделения пункта списка. Пользователь сможет выделять более одного пункта, если задан атрибут multiple (см. выше).
  2. Value – значение. Этот атрибут обязателен. Веб-сервер должен понимать, какие именно пункты списка выбрал пользователь.
  3. Label. С помощью этого атрибута можно сокращать слишком длинные элементы списков. Например, на экран будет выводиться «Милан», вместо указанного в теге option «Милан — административный центр Ломбардии. Северная Италия». Этот атрибут также используется для группировки пунктов в списке.

Что касается ширины списка, то она устанавливается по умолчанию по длине самого широкого текста в списке. Разумеется, ширину можно менять при помощи стилей HTML.

Выпадающий список другими способами

Его можно сделать при помощи CSS, например, список будет появляться при наведении курсора на элемент страницы. Отличные возможности для создания списков предоставляет JavaScript , работу которого упрощает библиотека Jquery. Выпадающий список, подключенный с помощью этой библиотеки, может быть очень сложным, например, каскадным. То есть при выборе элемента в одном списке появляется следующий список, например, существует пункт меню «Женская одежда» (при наведении выпадают виды одежды), затем при выборе одного из видов, например, «Верхняя одежда», выпадает список с элементами: куртки, парки, пальто, полупальто, шубы и т. п.

Мы поверхностно перечислили основные способы, при помощи которых можно создать выпадающий список. Разумеется, есть масса нюансов в HTML, в CSS и в JavaScript, которые позволяют менять функциональность и внешний вид списков.

Сортировка выпадающего списка

Сортировка выпадающего списка

Intended audience: XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.).

В качестве элемента формы, у меня есть выпадающий список элементов. Почему они не сортируются когда я перевожу элементы в списке?

Несмотря на то, что множество языков программирования имеют выпадающие списки элементов с возможностью сортировки элементов перед выводом на экран, HTML элемент <select> лишен подобного свойства. Он выводит элементы <options> в том порядке, в котором они указаны в коде. Соответственно, для вывода в нужном порядке их нужно отсортировать вручную или использовать различные вспомогательные инструменты разработчиков (например через XSLT преобразования).

Например, у нас имеется выпадающий список, состоящий из названий домашних животных. В списке содержатся следующие элементы в алфавитном порядке:

<form .....>
    <select size="1" name="pet">
       <option value='cat'>cat</option>
       <option value='dog'>dog</option>
       <option value='mouse'>mouse</option>
    </select>
...
...
</form>

Когда список оказывается переведенным на голандский язык, в нем присутствуют следующие элементы:

<form .....>
    <select size="1" name="pet">
       <option value='cat'>kat</option>
       <option value='dog'>hond</option>
       <option value='mouse'>muis</option>
    </select>
...
...
</form>

Для того чтобы соответствовать правилам сортировки по алфавиту на голаднском, мы должны переставить элементы списка следующим образом:

<form ..... >
    <select size="1" name="pet">
       <option value='dog'>hond</option>
       <option value='cat'>kat</option>
       <option value='mouse'>muis</option>
    </select>
...
...
</form>

Подобная операция производится для каждого отображаемого языка.

Заметьте, что атрибуты value не переводятся. Разделение материала отображаемого пользователю и данных, обрабатываемых на серверной стороне, позволяет разработчикам сохранять неизменной серверную часть. Это обозначает, что они не должны менять обработку значений, которые они получают от пользователя каждый раз, когда добавляется новый язык.

HTML Select Tag — Как создать раскрывающееся меню или комбинированный список

Тег выбора HTML используется для создания раскрывающихся меню, чтобы пользователи могли выбирать нужное значение. Это инструментальная функция при сборе данных для отправки на сервер.

Тег select обычно находится внутри элемента формы, а элементы для выбора закодированы в другом теге, . Он также может быть автономным элементом, который по-прежнему будет связан с формой с одним из ее специальных атрибутов, form .

В этом руководстве я расскажу, как создать раскрывающееся меню с тегом select, чтобы вы могли начать использовать его для сбора данных в своих проектах кодирования. Я также коснусь того, как стилизовать тег select, потому что его очень сложно стилизовать.

Атрибуты выбранного тега

Прежде чем я углублюсь в whot для создания раскрывающегося меню с тегом select, нам нужно обсудить атрибуты, которые принимает тег select.

Это его атрибуты:

  • имя: вам необходимо прикрепить имя к каждому элементу управления формой, поскольку оно используется для ссылки на данные после их отправки на сервер.
  • множественный: этот атрибут позволяет пользователю выбрать несколько вариантов из раскрывающегося меню.
    • Требуется
  • : обычно используется для проверки. С его помощью форма не будет отправлена, если пользователь не выберет хотя бы один вариант из раскрывающегося списка.
  • отключен: этот атрибут запрещает пользователю взаимодействовать с параметрами.
    • Размер
  • : Выраженный числами, атрибут размера используется для указания того, сколько параметров будет отображаться одновременно.
  • autofocus: этот атрибут используется для всех входных данных формы, включительно, чтобы указать, что входные данные должны быть в фокусе при загрузке страницы.

Чтобы создать раскрывающееся меню с тегом выбора, вам сначала понадобится элемент формы. Это потому, что у вас также будет кнопка отправки внутри него (элемент формы) для отправки данных на сервер.

Я добавил простой CSS, чтобы центрировать раскрывающийся список и кнопку, и придал телу светло-серый фон:

  кузов {
     дисплей: гибкий;
     align-items: center;
     justify-content: center;
     маржа: 0 авто;
     высота: 100вх;
     цвет фона: # f1f1f1;
   }

Вход {
     дисплей: гибкий;
     align-items: center;
     justify-content: center;
     маржа: 0 авто;
   }

Чтобы сделать его более сложным и доступным, вы также можете прикрепить поле выбора к элементу метки, чтобы он фокусировался при щелчке по тексту метки. Вы можете сделать это с помощью этого кода:

Я поставил числовой символ (#) в качестве значения атрибута действия, чтобы вы не получали 404, когда нажимаете кнопку отправки.

Но теперь нам нужно немного изменить CSS:

  кузов {
     дисплей: гибкий;
     align-items: center;
     justify-content: center;
     маржа: 0 авто;
     высота: 100вх;
     цвет фона: # f1f1f1;
   }

Вход {
     дисплей: гибкий;
     align-items: center;
     justify-content: center;
     маржа: 0 авто;
   }

метка {
     дисплей: гибкий;
     align-items: center;
     justify-content: center;
     маржа: 0 авто;
   }

Выбрать {
     нижнее поле: 10 пикселей;
     маржа сверху: 10 пикселей;
   }

В итоге это результат:

Это еще не конец. Один из раскрывающихся элементов отображается по умолчанию и будет выбран, если пользователь щелкнет кнопку отправки сразу после перехода на страницу.

Но это плохой пользовательский интерфейс. Вы можете избавиться от него, указав «выберите язык» в качестве первого пункта раскрывающегося списка.

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

Вы можете изменить это с помощью «атрибута размера», который по умолчанию покажет определенное количество элементов и покажет прокрутку для других элементов в раскрывающемся списке.

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

С помощью атрибута multiple вы можете разрешить пользователю выбирать несколько элементов из раскрывающегося списка.

По умолчанию отображаются 4 элемента.Чтобы выбрать несколько элементов, пользователь должен удерживать нажатой клавишу Shift или Ctrl, а затем выбрать их мышью.

Это еще не все, что вы можете сделать с тегами select и . Вы также можете создать многослойное поле выбора с элементом внутри тега

Как стилизовать выбранный элемент

Стилизация элемента select часто сбивает с толку и непоследовательно отображается в браузерах. Но всегда можно попробовать следующее:

  

      
      
      


  
  выбрать {
        нижнее поле: 10 пикселей;
        маржа сверху: 10 пикселей;
        семейство шрифтов: курсив, без засечек;
        наброски: 0;
        фон: # 2ecc71;
        цвет: #fff;
        граница: сплошная малиновая 1px;
        отступ: 4 пикселя;
        радиус границы: 9 пикселей;
      }

В приведенном выше фрагменте кода CSS я придал тексту в поле выбора следующий вид:

  • семейство шрифтов курсивного и белого цвета,
  • контур 0 для удаления некрасивого контура, когда он находится в фокусе,
  • зеленоватый фон,
  • 1-пиксельная граница малинового цвета,
  • радиус границы 4 пикселя для получения слегка закругленной границы со всех сторон,
  • и отступ в 4 пикселя, чтобы немного разложить объекты.

Поле выбора теперь выглядит лучше:

Заключение

Тег select очень полезен при создании раскрывающихся списков и комбинированных списков в HTML. Это похоже на переключатель и флажок в одном пакете.

Помните, что с помощью переключателей вы можете выбрать только один элемент из списка, но с помощью флажка вы можете выбрать несколько элементов. Выбор является более гибким, так как вы можете настроить его для приема только одного элемента или нескольких элементов.

Одна проблема с тегом select заключается в том, что его очень сложно стилизовать.Разумным решением является использование библиотеки CSS, которая предлагает отличные служебные классы для стилизации формы вместе с элементом select.

Я надеюсь, что это руководство познакомило вас с тегом select, чтобы вы могли начать использовать его в своих проектах.

Спасибо за чтение и продолжайте кодировать.

Создать DropDownList с помощью HtmlHelper в ASP.

Net MVC

Узнайте, как сгенерировать HTML-элемент раскрывающегося списка с помощью HtmlHelper в режиме бритвы.

Класс HtmlHelper включает два метода расширения для создания элемента управления для свойства, указанного с помощью лямбда-выражения.

Посетите docs.microsoft.com, чтобы узнать обо всех перегрузках метода DropDownListFor.

В следующем примере создается раскрывающийся список для указанного выше свойства StudentGender .

  @ using MyMVCApp.Models

@ модель Студент

@ Html.DropDownListFor (m => m.StudentGender,
            новый SelectList (Enum.GetValues ​​(typeof (Gender))),
            "Выберите пол")

В приведенном выше примере первый параметр в методе DropDownListFor () — это лямбда-выражение, указывающее свойство модели, которое необходимо связать с элементом select.Мы указали свойство StudentGender . Второй параметр указывает элементы, отображаемые в раскрывающемся списке с использованием объекта SelectList . Третий параметр является необязательным, он будет первым элементом раскрывающегося списка. Итак, теперь он генерирует элемент управления с указанным именем, элементами списка и атрибутами html.

Посетите docs.microsoft.com, чтобы узнать обо всех перегрузках метода DropDownList ().

  @ using MyMVCApp.Models

@ модель Студент

@ Html.DropDownList ("StudentGender",
                    новый SelectList (Enum.GetValues ​​(typeof (Gender))),
                    "Выберите пол",
                    новый {@class = "form-control"})

В приведенном выше примере первый параметр — это имя свойства, для которого мы хотим отображать элементы списка. Второй параметр — это список значений, которые нужно включить в раскрывающийся список. Мы использовали методы Enum для получения значений Gender . Третий параметр — это метка, которая будет первым элементом списка, а четвертый параметр предназначен для применения атрибутов HTML, таких как CSS, в раскрывающемся списке.

Пример сворачиваемого раскрывающегося списка | WAI-ARIA Authoring Practices 1.1

Пример сворачиваемого раскрывающегося списка | Практика создания WAI-ARIA 1.1

В следующем примере реализации шаблон проектирования для списка демонстрирует сворачиваемый виджет списка с одним выбором, который функционально подобен входу HTML select с атрибутом size = "1" .Виджет состоит из кнопки, которая запускает отображение списка. В состоянии по умолчанию виджет свернут (список не отображается), а метка кнопки показывает текущий выбранный вариант из списка. Когда кнопка активирована, отображается список, и текущая опция выделяется и выбирается.

Подобные примеры включают:

Пример

Выберите ваш любимый трансурановый элемент (актинид или трансактинид).

Выберите элемент: Нептуний
  • Нептуний
  • Плутоний
  • Америций
  • Кюрий
  • Берклий
  • Калифорний
  • Эйнштейний
  • Фермий
  • Менделевий
  • Нобелий
  • Лоуренсий
  • Резерфордий
  • Дубний
  • Сиборгий
  • Бориум
  • Калий
  • Мейтнерий
  • Дармштадтиум
  • Рентгений
  • Copernicium
  • Нихоний
  • Флеровий
  • Московий
  • Ливерморий
  • Теннессин
  • Оганессон
Банкноты

Этот список можно прокручивать; у него больше возможностей, чем может вместить его высота.

  1. Прокрутка работает должным образом только в том случае, если в списке есть offsetParent опций. В этом примере в списке используется позиция : относительно .
  2. Когда в фокусе находится опция, которая не (полностью) видна, позиция прокрутки списка обновляется:
    1. Если нажать Стрелка вверх или Стрелка вниз , предыдущий или следующий параметр прокручивается в поле зрения.
    2. Если нажать Home или End , список прокручивается полностью вверх или вниз.
    3. Если вызывается focusItem , опция в фокусе будет прокручена в верхнюю часть представления, если она была расположена над ней, или вниз, если она была ниже нее.
    4. Если щелкнуть мышью по частично видимому параметру, он будет полностью прокручен.
  3. Когда полностью видимый параметр находится в фокусе, прокрутка не происходит.

Поддержка клавиатуры

Пример списка на этой странице реализует следующий интерфейс клавиатуры. Другие варианты и параметры интерфейса клавиатуры описаны в Раздел «Взаимодействие с клавиатурой» шаблона проектирования «Список».

Ключ Функция
Введите
  • Если фокус находится на кнопке, раскрывает список и переводит фокус на текущий выбранный параметр в списке.
  • Если фокус находится в списке, сворачивает список и сохраняет текущий выбранный параметр в качестве метки кнопки.
Побег Если отображается список, сворачивает список и перемещает фокус на кнопку.
Стрелка вниз
  • Перемещает фокус и выбирает следующий параметр.
  • Если список свернут, также разворачивает список.
Стрелка вверх
  • Перемещает фокус и выбирает предыдущий параметр.
  • Если список свернут, также разворачивает список.
Домашний Если отображается список, перемещает фокус и выбирает первый вариант.
конец Если отображается список, перемещает фокус и выбирает последний вариант.
Печатаемые символы
  • Введите символ: фокус переместится к следующему элементу с именем, которое начинается с набранного символа.
  • Введите несколько символов в быстрой последовательности: фокус переместится к следующему элементу с именем, которое начинается с строки набранных символов.

Роль, свойство, состояние и атрибуты Tabindex

Пример списка на этой странице реализует следующие роли, состояния и свойства ARIA. Информация о других способах применения ролей, состояний и свойств ARIA доступна в разделе Раздел «Роли, состояния и свойства» шаблона проектирования «Список».

Роль Атрибут Элемент Использование
aria-labelledby = "ID_REF1 ID_REF2" кнопка
  • Ссылается на два элемента, ярлыки которых объединяются браузером для обозначения кнопки.
  • Первый элемент — это диапазон, содержащий текст. Выберите элемент: .
  • Второй элемент — это сама кнопка; текст кнопки устанавливается на имя текущего выбранного элемента.
aria-haspopup = "listbox" кнопка Указывает, что при нажатии кнопки отображается список.
aria-extended = "true" кнопка
  • Устанавливается JavaScript при отображении списка.
  • Иначе, нет.
список ул. Определяет фокусируемый элемент, который имеет поведение списка и содержит параметры списка.
aria-labelledby = "ID_REF" ул. Относится к элементу, содержащему метку списка.
tabindex = "- 1" ул.
  • Делает список доступным для фокусировки.
  • JavaScript устанавливает фокус на список, когда он отображается.
aria-activedescendant = "ID_REF" ул.
  • Устанавливается JavaScript, когда он отображает и устанавливает фокус в списке; иначе нет.
  • Относится к параметру в списке, который визуально отображается как имеющий фокус клавиатуры.
  • При нажатии клавиш навигации, таких как Стрелка вниз , JavaScript изменяет значение.
  • Позволяет вспомогательным технологиям узнать, какой элемент приложение считает сфокусированным, в то время как фокус DOM остается на элементе ul .
  • Для получения дополнительной информации об этом методе управления фокусом см. Использование aria-activedescendant для управления фокусом.
role = "option" ли Обозначает каждый выбираемый элемент, содержащий имя опции.
aria-selected = "true" ли
  • Указывает, что опция выбрана.
  • Применяется к элементу с опцией роли, который визуально оформлен как выбранный.
  • Параметр с этим атрибутом всегда совпадает с параметром, на который ссылается aria-activedescendant, потому что это список с одним выбором, в котором выбор следует за фокусом.

Исходный код JavaScript и CSS

Исходный код HTML
Шаблон проектирования Listbox в методиках разработки WAI-ARIA 1.1

Выпадающий список | Документация по Dash для Python

Для производственных приложений Dash стилем и макетом основных компонентов Dash
следует управлять с помощью Dash Enterprise Design Kit.

Раскрывающийся список по умолчанию

Пример раскрывающегося списка по умолчанию без
дополнительных свойств.

  импортный тире
импортировать dash_html_components как html
импортировать dash_core_components как dcc
из dash. dependencies import Input, Output

app = dash.Dash (__ имя__)
app.layout = html.Div ([
    dcc.Dropdown (
       ,
        options = [
            {'label': 'Нью-Йорк', 'value': 'NYC'},
            {'label': 'Montreal', 'value': 'MTL'},
            {'label': 'Сан-Франциско', 'value': 'SF'}
        ],
        value = 'NYC'
    ),
    html.Div (id = 'дд-выходной-контейнер')
])


@ app.callback (
    Вывод ('dd-output-container', 'дети'),
    Ввод ('демонстрационное раскрывающееся меню', 'значение')
)
def update_output (значение):
    return 'Вы выбрали "{}"'.формат (значение)


если __name__ == '__main__':
    app.run_server (отладка = True)

Многозначный раскрывающийся список

Выпадающий компонент со свойством multi , установленным на True
, позволит пользователю выбрать более одного значения
за раз.

  импортировать dash_core_components как dcc

dcc.Dropdown (
    options = [
        {'label': 'Нью-Йорк', 'value': 'NYC'},
        {'label': 'Montreal', 'value': 'MTL'},
        {'label': 'Сан-Франциско', 'value': 'SF'}
    ],
    value = ['MTL', 'NYC'],
    multi = True
)

Отключить поиск

Свойство с возможностью поиска по умолчанию установлено на True для всех
dcc. Выпадающее меню компонентов. Чтобы предотвратить поиск в раскрывающемся списке
, просто установите для свойства с возможностью поиска значение False .
Попробуйте выполнить поиск по запросу «Нью-Йорк» в раскрывающемся ниже раскрывающемся списке и сравните его с
в других раскрывающихся списках на странице, чтобы увидеть разницу.

  импортировать dash_core_components как dcc

dcc.Dropdown (
    options = [
        {'label': 'Нью-Йорк', 'value': 'NYC'},
        {'label': 'Montreal', 'value': 'MTL'},
        {'label': 'Сан-Франциско', 'value': 'SF'}
    ],
    searchchable = False
)

Очистить раскрывающийся список

Свойство очищаемого имеет значение True по умолчанию для всех
dcc.Выпадающее меню компонентов. Чтобы предотвратить очистку выбранного значения раскрывающегося списка
, просто установите для свойства очищаемое значение Ложь 

  импортировать dash_core_components как dcc

dcc. Dropdown (
    options = [
        {'label': 'Нью-Йорк', 'value': 'NYC'},
        {'label': 'Montreal', 'value': 'MTL'},
        {'label': 'Сан-Франциско', 'value': 'SF'}
    ],
    значение = 'MTL',
    clearable = Ложь
)

Текст-заполнитель

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

  импортировать dash_core_components как dcc

dcc.Dropdown (
    options = [
        {'label': 'Нью-Йорк', 'value': 'NYC'},
        {'label': 'Montreal', 'value': 'MTL'},
        {'label': 'Сан-Франциско', 'value': 'SF'}
    ],
    placeholder = "Выберите город",
)

Отключить раскрывающийся список

Чтобы отключить раскрывающийся список, просто установите disabled на True .

  импортировать dash_core_components как dcc

dcc.Dropdown (
    options = [
        {'label': 'Нью-Йорк', 'value': 'NYC'},
        {'label': 'Montreal', 'value': 'MTL'},
        {'label': 'Сан-Франциско', 'value': 'SF'}
    ],
    disabled = True
)

Отключить параметры

Чтобы отключить определенный параметр в раскрывающемся меню
, установите свойство disabled в параметрах.

  импортировать dash_core_components как dcc

dcc.Dropdown (
    options = [
        {'label': 'Нью-Йорк', 'value': 'NYC', 'disabled': True},
        {'label': 'Montreal', 'value': 'MTL'},
        {'label': 'San Francisco', 'value': 'SF', 'disabled': True}
    ]
)

Динамические параметры

Это пример того, как обновить параметры на сервере
в зависимости от условий поиска, вводимых пользователем. Например, для цели
параметры пусты при первой загрузке, как только вы начнете вводить
, они будут загружены с соответствующими значениями.

  импортный тире
из dash.exceptions import PreventUpdate
импортировать dash_html_components как html
импортировать dash_core_components как dcc
из dash.dependencies import Input, Output, State

options = [
    {"label": "Нью-Йорк", "value": "NYC"},
    {"label": "Montreal", "value": "MTL"},
    {"label": "Сан-Франциско", "value": "SF"},
]

app = dash.Dash (__ имя__)
app.layout = html. Div ([
    html.Div ([
        "Единое динамическое раскрывающееся меню",
        dcc.Dropdown (id = "my-dynamic-dropdown")
    ]),
    html.Div ([
        "Мульти-динамический раскрывающийся список",
        dcc.Dropdown (id = "my-multi-dynamic-dropdown", multi = True),
    ]),
])


@ app.callback (
    Вывод ("my-dynamic-dropdown", "options"),
    Ввод ("my-dynamic-dropdown", "search_value")
)
def update_options (search_value):
    если не search_value:
        поднять PreventUpdate
    верните [o вместо o в опциях, если search_value в o ["label"]]


@ app.callback (
    Вывод ("my-multi-dynamic-dropdown", "options"),
    Ввод ("my-multi-dynamic-dropdown", "search_value"),
    Состояние ("my-multi-dynamic-dropdown", "value")
)
def update_multi_options (search_value, значение):
    если не search_value:
        поднять PreventUpdate
    # Убедитесь, что установленные значения находятся в списке опций, иначе они исчезнут
    # из показанного списка выбора, но по-прежнему является частью `value`. возвращение [
        o вместо o в опциях, если search_value в o ["метка"] или o ["значение"] в (значение или [])
    ]


если __name__ == "__main__":
    app.run_server (отладка = True)

Раскрывающиеся свойства

Получите доступ к этой документации в своем терминале Python с помощью:
« python

справка (dash.dcc.Dropdown)
«

Наша рекомендуемая IDE для написания приложений Dash — это Dash Enterprise
Data Science Workspaces,
, которая имеет опережающую поддержку свойств компонентов Dash.
Узнайте, использует ли ваша компания
Dash Enterprise.

id ( строка ; необязательно):
Идентификатор этого компонента, используемый для идентификации компонентов тире в обратных вызовах
. Идентификатор должен быть уникальным для всех компонентов в
приложении.

className ( строка ; необязательно):
className раскрывающегося элемента.

очищаемый ( логическое значение ; по умолчанию True ):
Независимо от того, является ли раскрывающийся список «очищаемым», то есть отображается ли маленький значок
справа от раскрывающегося списка, удаляющий
выбранное значение.

отключено ( boolean ; по умолчанию False ):
Если True, этот раскрывающийся список отключен и выбор не может быть изменен.

loading_state ( dict ; необязательно):
Объект, содержащий объект состояния загрузки, поступающий из модуля рендеринга тире.

loading_state — это диктатор с ключами:

  • имя_компонента ( строка ; необязательно):
    Содержит имя загружаемого компонента.

  • is_loading ( boolean ; необязательно):
    Определяет, загружается компонент или нет.

  • prop_name ( строка ; необязательно):
    Указывает, какое свойство загружается.

multi ( boolean ; по умолчанию False ):
Если True, пользователь может выбрать несколько значений.

optionHeight ( номер ; по умолчанию 35 ):
высота каждой опции.Можно увеличить, если длина этикетки
будет наматываться вокруг.

опций ( список dicts ; необязательно):
Массив опций {метка: [строка | число], значение: [строка | число]},
необязательное отключенное поле можно использовать для каждой опции .

options — это список dicts с ключами:

  • отключено ( boolean ; необязательно):
    Если True, этот параметр отключен и не может быть выбран.

  • label ( строка | число ; обязательно):
    Ярлык раскрывающегося списка.

  • заголовок ( строка ; необязательно):
    HTML-атрибут «заголовок» для опции. Позволяет получить информацию
    при наведении курсора. Для получения дополнительной информации об этом атрибуте см.
    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title.

  • значение ( строка | число ; обязательно):
    Значение раскрывающегося списка.Это значение соответствует элементам
    , указанным в свойстве значение .

persisted_props ( список значений, равных: «значение» ; по умолчанию [«значение»] ):
Свойства, действия пользователя с которыми сохранятся после обновления компонента
или страницы. Поскольку разрешено только , значение , то обычно
игнорируется.

постоянство ( boolean | string | number ; необязательно):
Используется, чтобы разрешить взаимодействие пользователя в этом компоненте, которое сохраняется при
обновлении компонента или страницы.Если сохраняется, является истинным
и не изменилось по сравнению со своим предыдущим значением, значение , которое пользователь
изменил во время использования приложения, сохранит это изменение, пока новое значение
также соответствует заданному изначально. Используется в
вместе с persistence_type .

persistence_type ( значение, равное: ‘local’, ‘session’ или ‘memory’ ; по умолчанию 'local' ):
Где будут сохраняться постоянные изменения пользователя: memory: хранится только в памяти
, сбросить при обновлении страницы.local: window.localStorage, данные
сохраняются после закрытия браузера. session: window.sessionStorage, данные
очищаются после закрытия браузера.

заполнитель ( строка ; необязательно):
Серый текст по умолчанию, отображаемый, если не выбран ни один параметр.

search_value ( строка ; необязательно):
Значение, введенное в DropDown для поиска.

с возможностью поиска ( boolean ; по умолчанию True ):
Включать или нет функцию поиска.

style ( dict ; необязательно):
Определяет стили CSS, которые заменяют ранее установленные стили.

значение ( строка | число | список строк | числа ; необязательно):
Значение ввода. Если multi имеет значение False (по умолчанию), то значение
представляет собой просто строку, которая соответствует значениям, указанным в свойстве
options . Если multi имеет значение True, то можно выбрать сразу несколько значений
, а значение представляет собой массив элементов со значениями
, соответствующими значениям в options prop.

новый код — HTML-формы: раскрывающиеся меню

Выпадающие меню используются в формах для захвата ответов, для которых есть один правильный ответ из нескольких возможных ответов. Хороший пример этого — запрос на провинцию, штат или страну посетителя.

Рассмотрение альтернатив

При создании формы важно учитывать все возможности. Мы могли бы просто представить текстовое поле, в котором пользователь мог бы ввести название провинции, но это допускает возможность того, что он может сделать опечатку (которая становится проблемой, если эта информация вводится непосредственно в базу данных без контроля человека).Мы могли бы уменьшить размер текстового поля до двух символов и предложить пользователю просто ввести аббревиатуру провинции или штата: хотя это снижает вероятность ошибки, она не удаляет ее.

Одно из лучших решений для вопроса в форме, для которой есть только один правильный ответ из большого количества возможностей, — это раскрывающееся меню.

Раскрывающаяся разметка

В HTML-форме это создается с помощью тега , <вариант> Альберта

Сама форма не знает текста между открывающим и закрывающим тегами option .Хотя первый вариант может быть выбран нашим пользователем, фактические данные не будут отправлены в сценарий formhandler.php , который интерпретирует данные в форме. Мы, вероятно, ни в коем случае не хотим использовать слово «Альберта»; «AB» было бы предпочтительнее для добавления в список рассылки или базу данных. Для этого мы должны добавить значений атрибутов к каждой из этих опций:

(обратите внимание, что атрибут value также может использоваться для предварительной установки текста для текстового поля ).

Наконец, первая опция в нашем выпадающем меню будет автоматически выбрана по умолчанию. Это не всегда хорошо. Во-первых, помните о наших предположениях о нашем пользователе. Если мы что-то выбрали заранее, вполне вероятно, что он пропустит это, чтобы сэкономить время, или просто пропустит. Лучше предложить пользователю сделать выбор и сделать эту подсказку выбранной по умолчанию, если вы не можете быть абсолютно уверены, что подавляющее большинство респондентов вашей формы будет соответствовать заранее выбранным критериям.

Вы найдете учебники и интерактивную справку, в которых содержится код, позволяющий выбрать несколько вариантов в раскрывающемся списке или который превращает раскрывающийся список выбора в интерфейс с прокруткой. Вообще говоря, такая практика категорически не рекомендуется. Люди сбиваются с толку, когда их представляют, что приводит к ошибкам при вводе данных.

Элемент optgroup должен использоваться для обозначения групп связанных опций в раскрывающемся списке; саму optgroup нельзя выбрать. Довольно сбивает с толку то, что optgroup имеет обязательный атрибут, label , который используется для обозначения ссылки на группу.

Например, чтобы показать штаты в США и провинции / территории Канады в том же раскрывающемся списке , мы могли бы сделать следующее.

В браузере результат будет выглядеть примерно так:

Штат / провинция / территория — выберите один — Алабама, Калифорния… оставшиеся штаты США… Альберта, Британская Колумбия… оставшиеся провинции и территории…

Для выберите меню, такое длинное и сложное, обычно рекомендуется использовать JavaScript для динамического изменения содержимое выберите на основе выбора пользователя ранее в форме.Например, если пользователь выберет свою страну сначала , это должно уменьшить количество видимых опций в раскрывающемся списке «штат», чтобы отобразить только соответствующие территории в их конкретной стране. Это обеспечивает более интеллектуальную и интуитивно понятную форму и лучший пользовательский интерфейс.

Естественно, меню , используемый вместе с одним или несколькими элементами

Выберите свой любимый вид фламинго.

Американский фламингоАндийский фламингоЧилийский фламингоБольшой фламингоФламинго ДжеймсаЛессер фламинго

Строительные формы

Элемент

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *