HTML/CSS: Вложенные <параметры> в поле <select>?

Ответ 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/

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

Представьте, А, В и С - ваши варианты:

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 = 0 пикселей
• Элемент B будет иметь отступ слева 1 * 5 = 5 пикселей
• Элемент C будет иметь отступ слева 2 * 5 = 10 пикселей

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

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

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

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

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