Возможность выбора <optgroup>в теге HTML <select> - PullRequest
Новая
       21

Возможность выбора <optgroup>в теге HTML <select>

59 голосов
/ 27 марта 2012

Есть ли способ сделать группу опций доступной для выбора? 

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

Ответы [ 7 ]

49 голосов
/ 27 марта 2012

Я не думаю, что вы можете, но вы можете легко воспроизвести визуальный стиль с помощью 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>

Атрибут множественного доступа позволяет вам выбрать более одной строки (при нажатии Ctrl). Вы можете удалить его, если это не то, что вы хотите. Это должно было показать вам, что все стало выбираемым и выглядит так же, как с элементом optiongroup.

9 голосов
/ 03 декабря 2014

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

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

4 голосов
/ 16 августа 2016

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

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

Это привело меня к выводу, что лучший способ обойти эту проблему - это использовать библиотеку, подобную 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>
2 голосов
/ 19 июля 2016

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

.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>
0 голосов
/ 03 августа 2015

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

.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>
0 голосов
/ 16 апреля 2014

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

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

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

0 голосов
/ 27 марта 2012

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

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