Выбираемая <optgroup> в теге HTML <select>

Можно ли выбрать группу параметров?

<select>
   <optgroup value="0" label="Parent Tag">
      <option value="1">Child Tag</option>
      <option value="2">Child Tag</option>
   </optgroup>
</select>

ОТВЕТЫ

Ответ 1

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

.optionGroup {
    font-weight: bold;
    font-style: italic;
}
    
.optionChild {
    padding-left: 15px;
}
<select multiple="multiple">
    <option value="0" class="optionGroup">Parent Tag</option>
    <option value="1" class="optionChild">Child Tag</option>
    <option value="2" class="optionChild">Child Tag</option>
</select>

Ответ 2

Это невозможно с помощью простого html. Несколько браузеров (mozilla) позволят вам добиться чего-то подобного с помощью css, но на момент написания этой статьи большинство браузеров (webkit, et.al) не поддерживают стиль элементов выбора html.

Однако существует ряд javascript-библиотек, предназначенных для улучшения виджетов html-select и предоставления отсутствующих функций, таких как запрашиваемый. Чтобы назвать несколько:

Ответ 3

Пока это не поддерживается в стандарте html, все и все приведенные ответы были проблематичными, в том числе:

  • Атрибуты класса разрешены для дочерних элементов select, но если/как стиль применяется к элементу, он сильно варьируется между браузерами и версиями браузера.
  • Префикс с & nbsp; будет иметь следствием, что, если элемент выбора уже, чем выбранный вариант, визуальный эффект не будет приятным, при этом читаемый текст будет скрыт справа (см. пример ниже).
  • Любой стиль, который вы применяете, не обязательно будет соответствовать стилю, к которому привык пользователь браузера. жирным шрифтом и курсивом является Firefox, но не обязательно каждый браузер. Многие браузеры применяют стиль, включая серый цвет, чтобы указать, что optgroup НЕ выбирается.
  • Концепция метки выбора optgroup не обязательно будет ожидаться пользователем.

Это привело меня к выводу, что лучший способ обойти эту проблему - либо использовать такую ​​библиотеку, как UI-Selectable для всех выбранных на вашем сайте (для согласованности), либо использовать первый вариант в optgroup для представления выбора всех дети, с четким описанием (например, "ВСЕ шведские автомобили" ):

<select multiple="multiple">
   <optgroup label="Parent">
      <option value="0" class="optionChild">ALL Children</option>
      <option value="1" class="optionChild">Child Tag 1</option>
      <option value="2" class="optionChild">Child Tag 2</option>
   </optgroup>
</select>


.my-select {
  width: 60px;
}
<select class="my-select">
  <option>Parent</option>
  <option selected="selected">&nbsp;&nbsp;&nbsp;Child</option>
</select>

Ответ 4

немного другое решение..

.optionGroup {
    font-weight: bold;

}
<select>
    <option value="0" class="optionGroup">Parent Tag</option>
    <option value="1">&nbsp;&nbsp;&nbsp;Child Tag1</option>
    <option value="2">&nbsp;&nbsp;&nbsp;Child Tag2</option>
</select>

Ответ 5

Ответ @grifos не поддерживается в браузерах WebKit и не работает при тестировании в IE 11.

Одно из предложений может заключаться в том, чтобы использовать список Unordered/Ordered и стилизовать его с помощью CSS, а затем добавить функциональность с помощью JavaScript/jQuery.

Я видел хорошую реализацию этого в прошлом, он может выглядеть действительно гладким!

Ответ 6

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

.hide {
  display:none;
}
.show {
  display:block;
}
.selected.button {
  display:block;
  font-weight: bold;
}
button {
  text-align: left;
  min-width: 200px;
  margin-left: 10px;
  border: 0px;
  background: #eee;
  display: block;
}
#value_display {
  width: 210px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding-left: 8px;
}
</style>
<html>
<body>


<!-- Div is a display and also trigger for displaying dropdown -->
<div id="value_display" onclick="showOptions(this.value)">
  opt 0
</div>

<!-- setting height and doing overflow-y allows dropdown list with scrollbox -->
<div id="select_div" class="hide" style="height: 80px; overflow-y: scroll;">

<button class="selected button" onclick="select(this.id)" id="opt 0">opt 0</button>
<button onclick="select(this.id)" id="opt 0-1" style="padding-left: 15px">opt 0-1</button>
<button onclick="select(this.id)" id="opt 0-2" style="padding-left: 15px">opt 0-2</button>
<button onclick="select(this.id)" id="opt 0-3" style="padding-left: 15px">opt 0-3</button>
<button onclick="select(this.id)" id="opt 0-4" style="padding-left: 15px">opt 0-4</button>
<button class="" onclick="select(this.id)" id="opt 1">opt 1</button>
<button onclick="select(this.id)" id="opt 1-1" style="padding-left: 15px">opt 1-1</button>
<button onclick="select(this.id)" id="opt 1-2" style="padding-left: 15px">opt 1-2</button>
<button onclick="select(this.id)" id="opt 1-3" style="padding-left: 15px">opt 1-3</button>
<button onclick="select(this.id)" id="opt 1-4" style="padding-left: 15px">opt 1-4</button>


<script>

var showingOptions = false;
var showingID = document.getElementById('value_display').innerHTML;

function showOptions() {
 if(showingOptions) {
   document.getElementById('select_div').className = "hide";
   showingOptions = false;
 }
 else {
   document.getElementById('select_div').className = "show";
   showingOptions = true;
 }
}
function select(id){
  document.getElementById(id).className = 'selected button';
  document.getElementById(showingID).className = 'show';
  showingID = id;
  document.getElementById('value_display').innerHTML = id;
  document.getElementById('select_div').className = 'hide';
}

</script>

Ответ 7

<select multiple="multiple">
<optgroup label="Group 1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</optgroup>
<optgroup label="Group 3">
    <option value="15">15</option>
</optgroup>

Для получения дополнительной информации См. эту ссылку === > https://jsfiddle.net/apurv195/8ew4Lugb/

Ответ 8

Вопрос не очень ясен, но это то, что вы ищете:

<select multiple="multiple">
   <optgroup label="Parent Tag">
      <option value="1">Child Tag</option>
      <option value="2">Child Tag</option>
   </optgroup>
</select>