HTML / CSS: вложено <options>в поле <select>?

Question

Можно ли создавать вложенные поля опций в раскрывающемся списке формы, как если бы вы создавали вложенные списки ul?

Поскольку изменение носит эстетический характер, возможно ли это сделать с помощью css?

Answer 1

Вы можете использовать <optgroup> для создания одного уровня вложенности ...

<select>
  <optgroup label="Options 1">
     <option>Option 1.1</option>
     <option>Option 1.2</option>
  </optgroup>
  <optgroup label="Options 2">
     <option>Option 2.1</option>
     <option>Option 2.2</option>
  </optgroup>
</select>

Пример: http://jsfiddle.net/JaZAm/1/

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

Answer 2

Вы не можете вкладывать несколько <option> с.Если вы хотите сгруппировать <option> элементы, используйте <optgroup>.

Answer 3

Можно вкладывать опции и даже делать их выбираемыми. Но вам нужно будет использовать JavaScript. В этом примере код написан на языке TypeScript (Angular v6), но вы можете сделать то же самое с любой другой современной средой Javascript, чисто Javascript или jQuery.

Представьте, A, B и C - ваши варианты:

let options = [
    'A',
    'B',
    'C'
];

Вы хотите отобразить их как: A-> B-> C (A - родитель B, а B - родитель C.)

И вы хотите, чтобы пользователь мог выбирать A и C, но не B. Давайте создадим простой интерфейс, который сделает это проще:

interface CoolOption {
    content: string,
    selectable: boolean,
    depth: number
};

Теперь ваши параметры будут выглядеть так:

let selectedOption: string = null;
let options: CoolOption[] = new Array<CoolOption>();
let A: CoolOption = {
    content: 'A',
    selectable: true,
    depth: 0
};
let B: CoolOption = {
    content: 'B',
    selectable: false,
    depth: 1
};
let C: CoolOption = {
    content: 'A',
    selectable: true,
    depth: 2
};

И ваш выбранный шаблон будет выглядеть так:

<mat-select>
    <mat-option *ngFor="let option of options" (change)="setSelectedOption($event)">
        <span [style.padding-left.px]="option.depth * 5">
            {{
                option.content
            }}
        </span>
    </mat-option>
</mat-select>

Простое объяснение: когда пользователь выбирает опцию, вызывается функция setSelectedOption (мы определим ее далее). Также на свойство CSS padding-left будет влиять свойство 'глубина', которое мы установили ранее.

• Элемент будет иметь отступ слева от 0 * 5 = 0px
• Элемент B будет иметь отступ слева 1 * 5 = 5px
• Элемент C будет иметь отступ слева 2 * 5 = 10px

Таким образом, мы «подражаем» эффекту гнезда.

Наконец, наша функция setSelectedOption:

setSelectedOption(option: CoolOption) {
    if (option.selectable) {
        this.selectedOption = option.content;
    }
}

В основном, если это можно выбрать, значение selectedOption изменится. В противном случае он останется нетронутым.

Надеюсь, это кому-нибудь поможет, и извините за то, что не хватает времени для репликации примеров на чистом JavaScript.

Answer 4

Посмотрите на использование тега optgroup. Что касается поддержки стилей, то она есть, но вы зависите от браузера, насколько далеко вы можете взять его, поскольку он является элементом формы.

http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single-optgroup/

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

Answer 5

Нет, не совсем. Существует тег optgroup, которые являются невыбираемыми заголовками, которые можно добавлять между разделами, но вложение для элементов <select> невозможно.