Можно ли выбрать группу параметров?
<select>
<optgroup value="0" label="Parent Tag">
<option value="1">Child Tag</option>
<option value="2">Child Tag</option>
</optgroup>
</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>
Это невозможно с помощью простого html. Несколько браузеров (mozilla) позволят вам добиться чего-то подобного с помощью css, но на момент написания этой статьи большинство браузеров (webkit, et.al) не поддерживают стиль элементов выбора html.
Однако существует ряд javascript-библиотек, предназначенных для улучшения виджетов html-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>
немного другое решение..
.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>
Ответ @grifos не поддерживается в браузерах WebKit и не работает при тестировании в IE 11.
Одно из предложений может заключаться в том, чтобы использовать список Unordered/Ordered и стилизовать его с помощью CSS, а затем добавить функциональность с помощью JavaScript/jQuery.
Я видел хорошую реализацию этого в прошлом, он может выглядеть действительно гладким!
Это даст представление о выпадающем списке с выбираемыми группами опций. Оставил его очень просто, но вы можете создать свой контент.
.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>
<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/
Вопрос не очень ясен, но это то, что вы ищете:
<select multiple="multiple">
<optgroup label="Parent Tag">
<option value="1">Child Tag</option>
<option value="2">Child Tag</option>
</optgroup>
</select>