具有扩展optgroup的下拉框 [英] Dropdown Box with expanding optgroup
问题描述
我正在寻找可供扩展的optgroup使用的选择框
Im looking for a select box that i can use that has expandible optgroups
在鼠标移到optgroup标签上之前，组中的选项不显示
The options in the groups should not display until the mouse is move over the optgroup label
<select>
<optgroup label="group 1">
<option>1</option> <!-- Options within this group hidden until mouseover its group label -->
<option>2</option>
<option>3</option>
<option>4</option>
</optgroup>
<optgroup label="group 2">
<option>1</option> <!-- Options within this group hidden until mouseover its group label -->
<option>2</option>
<option>3</option>
<option>4</option>
</optgroup>
<optgroup label="group 3">
<option>1</option> <!-- Options within this group hidden until mouseover its group label -->
<option>2</option>
<option>3</option>
<option>4</option>
</optgroup>
</select>
我希望能够执行此操作，因为它将有一些非常大的选择，这将有助于分解它们.
I want to be able to do this becuase am going to have some very large options and it will help break them down.
如果我无法通过HTML选择框+ JS来执行此操作，我想构建一个自定义的下拉菜单，以使用DIV标签支持此操作.如果有人知道我在哪里可以找到有关此信息或教程的信息，那将是很好的.
If i am unable to do this through an HTML select box + JS i would like to build a customised dropdown that will support this using DIV tags. If anyone knows where i can find any information about this or a tutorial that would be great.
谢谢
推荐答案
NVM我找到了可行的解决方案，
NVM i found a solution that works,
我必须使用HTML，CSS和JS来实现我想要的.
I had to use HTML, CSS and JS to achieve what i wanted.
我复制了本教程 http://www.onextrapixel. com/2012/06/20/create-a-custom-select-box-with-jquery/
并添加了生成组和功能所需的额外位.
and added the extra bits i needed to generate the groups and functionality.
对我有用的代码如下....
The code that works for me is below....
这是生成布局的HTML
This is the HTML to generate the layout
<div class='selectBox'>
<span class='selected'>Reset Filter</span> <span class=
'selectArrow'>&#9660</span>
<div class="selectOptions">
<div>
<span class="selectOption c1" value="reset" group="0">Reset Filter</span>
</div>
<div>
<span class="selectOption c1" value="online_booking" group="1">Online
Booking</span>
</div>
<div>
<span class="selectOptionGroup" value="2">>> Services Offered</span>
<span class="selectOption" value="SERVICING" group="2">SERVICING</span>
<span class="selectOption" value="MOT TESTING" group="2">MOT TESTING</span>
<span class="selectOption" value="TYRES" group="2">TYRES</span>
</div>
<div>
<span class="selectOptionGroup" value="3">>> Car Manufacturer</span>
<span class="selectOption" value="ALFA ROMEO" group="3">ALFA ROMEO</span>
<span class="selectOption" value="ASTON MARTIN" group="3">ASTON MARTIN</span>
<span class="selectOption" value="AUDI" group="3">AUDI</span>
</div>
</div>
</div>
这是创建下拉列表的Jquery JS代码
This is the Jquery JS code that creates the dropdown
function enableSelectBoxes(){
$('div.selectBox').each(function(){
$(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
$(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));
$(this).children('span.selected,span.selectArrow').click(function(){
if($(this).parent().children('div.selectOptions').css('display') == 'none'){
$(this).parent().children('div.selectOptions').css('display','block');
}
else
{
$(this).parent().children('div.selectOptions').css('display','none');
}
});
$(this).find('span.selectOption').click(function(){
$(this).parent().parent().css('display','none');
$(this).closest('div.selectBox').attr('value',$(this).attr('value'));
$(this).parent().parent().siblings('span.selected').html($(this).html());
$("#filter_type").val($(this).attr("group"));
$("#filter_value").val($(this).attr("value"));
});
$(this).find('span.selectOptionGroup').click(function(){
var group = $(this).attr("value");
$(this).parent().children("span[group='" + group + "']").each(function(){
if($(this).css("display") == "block") {
$(this).css("display", "none");
}
else {
$(this).css("display", "block");
}
});
});
});
}
最后是CSS
div.selectBox {
position: relative;
display: inline-block;
cursor: default;
text-align: left;
line-height: 30px;
clear: both;
color: #888;
margin-top: 20px;
}
span.selected {
width: 167px;
text-indent: 20px;
border: 1px solid #ccc;
border-right: none;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background: #f6f6f6;
overflow: hidden;
}
span.selectArrow {
width: 30px;
border: 1px solid #9FD573;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
text-align: center;
font-size: 20px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
background: #9FD573;
}
span.selectArrow,span.selected {
position: relative;
float: left;
height: 30px;
z-index: 1;
}
div.selectOptions {
position: absolute;
top: 28px;
left: 0;
width: 198px;
border: 1px solid #ccc;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
overflow: hidden;
background: #f6f6f6;
padding-top: 2px;
display: none;
max-height: 400px;
overflow: auto;
}
span.selectOption, span.selectOptionGroup {
width: 80%;
line-height: 20px;
padding: 5px 10%;
}
span.selectOption{
display: none;
}
span.selectOption:hover, span.selectOptionGroup:hover {
color: #f6f6f6;
background: #4096ee;
}
span.selectOptionGroup {
display: block;
font-weight: bold;
font-style: italic;
}
这篇关于具有扩展optgroup的下拉框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
