Можно ли выбрать группу опций?Выбирается <optgroup> в HTML <select> тег
<select>
<optgroup value="0" label="Parent Tag">
<option value="1">Child Tag</option>
<option value="2">Child Tag</option>
</optgroup>
</select>
Я не думаю, что вы можете, но вы можете легко воспроизвести визуальный стиль с помощью 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.
вопрос не очень понятно, но это то, что вы ищете:
<select multiple="multiple">
<optgroup label="Parent Tag">
<option value="1">Child Tag</option>
<option value="2">Child Tag</option>
</optgroup>
</select>
Извините за не достаточно ясно. Я хочу, чтобы optgroup была выбрана так же, как вы выбрали опцию. –
@ ответ grifos не поддерживается в WebKit браузерах и не работает, когда Испытан в IE 11.
Одно из предложений было бы использовать маркированный/нумерованный список и стиль его с помощью CSS, а затем добавить функциональность JavaScript/JQuery.
Я видел прекрасную реализацию этого в прошлом, он может выглядеть очень гладко!
Это невозможно с использованием простого html. Несколько браузеров (mozilla) позволят вам добиться чего-то подобного с помощью css, но на момент написания этой статьи большинство браузеров (webkit, et.al) не поддерживают стиль элементов html select.
Однако существует ряд библиотек javascript, предназначенных для улучшения виджетов html-select и предоставления отсутствующих функций, таких как запрашиваемые. Для того, чтобы назвать несколько:
Select2 is excellent – CVertex
Это даст голое ощущение списка с возможностью выбора 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>
немного другое решение ..
.optionGroup {
font-weight: bold;
}<select>
<option value="0" class="optionGroup">Parent Tag</option>
<option value="1"> Child Tag1</option>
<option value="2"> Child Tag2</option>
</select>До этого поддерживается в стандарте HTML, любые и все ответы, данные были проблематичными , в том числе:
Это привело меня к выводу, что лучший способ обойти эту проблему состоит в том, чтобы использовать библиотеку, такую как 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"> Child</option>
</select>
Я пробовал это, но работает только в Firefox. –
Извините забыли вариант стиля - это беспорядок через веб-браузеры. – grifos
По крайней мере, вы можете создать отступ с добавлением – grifos