Как встроить теги опций в select и разделить их с помощью optgroup?
Актуальная проблема заключается в том, чтобы использовать тег параметра в блоке выбора по горизонтали и разделить значения параметров с помощью группы опций.
Таким образом, ожидаемый результат будет следующим:
Showing elements on the page 10 | 20 | 30, где можно выбрать 10, 20, 30, а в таблице будет показано выбранное количество элементов.
Решение, к которому я пришел:
HTML:
<div class = "styled-select">
<select size = "3">
<optgroup label = "|">
<option value = "10">10</option>
</optgroup>
<optgroup label = "|">
<option value = "20">20</option>
</optgroup>
<optgroup label = "|">
<option value = "30">30</option>
</optgroup>
</select>
</div>
CSS:
.styled-select {
display:inline-block;
overflow:hidden;
margin-top:30px;
overflow-x:hidden;
height:25px;
}
.styled-select select {
margin: -1px -20px -5px -5px;
}
optgroup {
position:relative;
display:inline-block;
width:32px;
padding-left:5px;
padding-right: 0px;
}
optgroup:nth-child(1) {
visibility:hidden;
}
.styled-select select option{
visibility:visible;
position:absolute;
display:inline-block;
width:15px;
margin-left:12px !important;
padding-top:-10px !important;
margin-top:-16px !important;
text-align: center;
}
.styled-select select option::before{
content: none;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0 0 0 0;
}
Результат вы можете увидеть здесь: https://jsfiddle.net/834gwtz7/4/
Если у вас есть какие-либо предложения, как сделать это более элегантно, пожалуйста, помогите!
Ответы 2
Не уверен, что я следовал тому, что вы хотели сделать, но, может быть, что-то более простое, как это, работает так же?
<!DOCTYPE html>
<html>
<body>
<style>
#styled-select select optgroup {
display:inline-block;
}
</style>
<div id = "styled-select">
<select size = "3">
<optgroup label = "option1">
<option value = "10">10</option>
<option value = "10">10</option>
</optgroup>
<optgroup label = "option2">
<option value = "20">20</option>
<option value = "10">10</option>
</optgroup>
<optgroup label = "option3">
<option value = "30">30</option>
<option value = "10">10</option>
</optgroup>
</select>
</div>
</body>
</html>
Нет, это не похоже на мой результат. См. ссылку, прикрепленную к вопросу jsfiddle.net/834gwtz7/4
Итак, в качестве «грязного» решения для тех, кто также имеет такие требования и использует таблицы данных, вы можете использовать решение из моего вопроса. Я искренне понимаю, что это не такой элегантный способ сделать это, поэтому предложения приветствуются =)
UPD: я привязан к использованию выбора с опцией, потому что я использую DataTables для отображения элементов. И select используется для установки максимального количества элементов, отображаемых на странице.