Выбирается в теге HTML

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

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

7 ответов:

Я не думаю, что вы можете, но вы можете легко воспроизвести визуальный стиль с помощью 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 click). Вы можете удалить его, если это не то, что вы хотите. Это должно было показать вам, что все стало выбираемым, и это выглядит так же, как с элементом optiongroup.

42

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

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

9

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

  1. атрибуты класса для детей выбрать, а если как стиль применяется к элементу, варьируются в зависимости от браузера и его версии.
  2. префикс с будет иметь следствием, что если выбрать элемент уже, чем выбранный вариант, визуальный эффект не будет приятным, с читаемым текстом скрыт справа (см. пример ниже).
  3. любой стиль, который вы применяете, не обязательно будет соответствовать стилю, к которому привык пользователь браузера. жирный шрифт и курсив-это Firefox, но не обязательно каждый браузер. Многие браузеры применяют стиль, включая серый цвет, чтобы помочь указать, что optgroup не выбирается
  4. концепция метки select optgroup не обязательно будет ожидаться пользователем.

Это привело меня к выводу лучше способ обойти эту проблему-либо использовать библиотеку, такую как UI-Selectable for all selects на вашем сайте (для согласованности), либо использовать первый вариант в 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>
3

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

.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>
2

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

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

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

0

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

.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

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

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