Javascript 带有展开optgroup的下拉框
我在寻找一个选择框,我可以使用它有可扩展的optgroup 在将鼠标移到optgroup标签上之前,不应显示组中的选项Javascript 带有展开optgroup的下拉框,javascript,jquery,html,jquery-ui,jquery-plugins,Javascript,Jquery,Html,Jquery Ui,Jquery Plugins,我在寻找一个选择框,我可以使用它有可扩展的optgroup 在将鼠标移到optgroup标签上之前,不应显示组中的选项 <select> <optgroup label="group 1"> <option>1</option> <!-- Options within this group hidden until mouseover its group label --> <option>2</optio
<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>
1.
2.
3.
4.
1.
2.
3.
4.
1.
2.
3.
4.
我希望能够做到这一点,因为我将有一些非常大的选择,这将有助于打破他们
如果我无法通过HTML选择框+JS来实现这一点,我希望构建一个自定义下拉列表,使用DIV标记来支持这一点。如果有人知道我在哪里可以找到任何关于这个或教程的信息,那就太好了
谢谢NVM我找到了一个有效的解决方案 我必须使用HTML、CSS和JS来实现我想要的 我复制了这个教程 并添加了生成组和功能所需的额外位 适用于我的代码如下 这是生成布局的HTML
<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>
最后是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;
}
NVM我找到了一个有效的解决方案 我必须使用HTML、CSS和JS来实现我想要的 我复制了这个教程 并添加了生成组和功能所需的额外位 适用于我的代码如下 这是生成布局的HTML
<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>
最后是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;
}
我认为这在html选择框中是不可能的,因为并非所有浏览器都支持选择框中选项组上的鼠标事件。您可能想尝试以下几件事:
$(document).ready(function() {$("#accordion").accordion();});
这是有限的,因为一个手风琴一次只能打开一个项目。如果用户想要一次比较所有选项,那么它们就完蛋了我注意到你刚刚回答了自己的问题,但我还是要发帖,因为jqTree可能很有用,其他人应该知道,标准html选择框不支持optgroups上的鼠标事件我认为html选择框不可能做到这一点,因为并非所有浏览器都支持选择框中选项组上的鼠标事件。您可能想尝试以下几件事:
$(document).ready(function() {$("#accordion").accordion();});
这是有限的,因为一个手风琴一次只能打开一个项目。如果用户想要一次比较所有选项,那么它们就完蛋了我注意到你刚刚回答了自己的问题,但我还是要发帖,因为jqTree可能很有用,其他人应该知道,标准html选择框不支持OptGroup上的鼠标事件谢谢你的回复,我已经找到了解决方案,但谢谢你的输入。第2点和第3点是我已经想到的,但是我认为它们对于我所需要的东西来说是多余的。谢谢你的回复,我已经找到了一个解决方案,但是谢谢你的投入。第2点和第3点是我已经想到过的,但我认为它们对于我所需要的东西来说是多余的。