我要做的是将下拉菜单分开。在这个例子中有五个选项如何将下拉分割成类别？例如，选项1和2弹出环境类别和选项3和4体育类别和5个大学类别？ http://jsfiddle.net/fc3550sk/
例如：
下拉：请点击时选择菜单将是环境，体育，学院.. 然后将鼠标悬停在环境中，它将允许您从选项1或2中进行选择...或将鼠标悬停在运动上，它将允许您从3或4中选择，依此类推......
这是我到目前为止所做的：
<select name="SPECIAL" id="SPECIAL">
<option>Please Select</div>
<option data-img="/images/img/AnimalFriend.png" value="1">AnimalFriend</option>
<option data-img="/images/img/Aquaculture.png" value="2">Aquaculture</option>
<option data-img="/images/img/ProtectOurOceans.png" value="3">Protect Our Oceans</option>
<option data-img="/images/img/ConserveWildlife.png" value="4">Conserve Wildlife</option>
</select>
<!-- Modal -->
<div class="modal fade" id="modal_special" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Specialty Plate</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary accept">Accept</button>
</div>
</div>
</div>
</div>
$(function() {
$('#SPECIAL').on('change', function() {
if ($('option:selected', this).is('[data-img]')) {
$('#modal_special').find('.modal-body').html('<p>Image will go here:</p>')
.append('<img alt="coming soon" src="' + $('option:selected', this).data('img') + '"/>')
.end().modal('show');
}
});
$('.accept').on('click',function() {
//do something
$('#modal_special').modal('hide');
});
});
非常感谢任何帮助!!
答案 0 :(得分：3)
我不知道如何附加＆＃34;悬停＆＃34;标准下拉菜单的事件监听器，但使用jquery，html和css实现自己的自定义下拉列表并不算太多。
您可以根据需要为每个条目分配尽可能多的自定义值。
在您的示例中，您有＆＃34; Specialty Plates＆＃34;，您可能想要分配价格，分配给该牌照的特殊代码，分配给该牌照的图像，等等。使用HTML / jQuery版本，您可以使用简单的<span>标记创建自定义下拉列表，如下所示：
<span data-code="SPRT01" data-image="" data-price="34.00">Sports 01</span>
<span data-code="SPRT02" data-image="" data-price="35.00">Sports 02</span>
<span data-code="SPRT03" data-image="" data-price="36.00">Sports 03</span>
注意每个条目如何分配三个自定义值：数据代码，数据图像和数据价格。如果你使用html下拉列表，你就没有那么多的自由。有一些方法可以扩展与标准下拉列表相关联的值，但是获取值非常混乱，您仍然无法访问功能所需的悬停行为。
您实际上可以以任何方式使用悬停行为。
在您的示例中，您需要＆＃34;子菜单＆＃34;当您选择下拉列表中的某些值时显示，但据我所知，没有办法获取“徘徊”的值。在标准的下拉菜单中，寻找一个只有HTML的解决方案并不存在，所以你必须以某种方式使用javascript。
使用jQuery，您可以轻松获取自定义下拉元素中的值，如下所示：
$("span").hover(
function(){
var text = $(this).text();
console.log("You have hovered on: ", text);
},
function(){
// You have hovered off the span
}
);
将这些想法付诸实践，我将如何使用您的应用程序参数创建自定义下拉列表的简单演示。
You can review a jsfiddle of the demo here.
基本思想是在html中使用div .drop_down_scroll_container中的顶级选项（环境，体育，学院）的结构创建层次结构，并放置所有子级别div（环境01，环境02等，在div中划分{div .dropdown-subcategory的div。魔法发生的地方是，javascript查找顶级选项的索引，然后显示具有相同索引的dropdown-subcategory。
例如，在以下html片段中，您可以看到drop_down_scroll_container div中每个范围的索引位置：
<div class="drop_down_scroll_container">
<span>Environment</span> <!-- index 0 -->
<span>Sports</span> <!-- index 1 -->
<span>Colleges</span> <!-- index 2 -->
</div>
那么，当你将鼠标悬停在任何顶级选项（环境，体育，学院）上时，你可以让jQuery显示相应的子菜单div，它位于div容器中的.drop_down_scroll_container div下面一类.dropdown-subcategory
<div id="dropdown" class="specialtyPlatesCategories">
<div class="selectHeader">Click to Select Plates:</div>
<!-- THIS IS WHERE YOU WILL PUT YOUR TOP-LEVEL OPTIONS -->
<div class="drop_down_scroll_container">
<span>Environment</span>
<span>Sports</span>
<span>Colleges</span>
</div>
<!-- THIS DIV IS AT INDEX 0 of: #dropdown.dropdown-subcategory -->
<!-- Will fade in when the drop_down_scroll_container index 0 is hovered -->
<div id="env_subcategories" class="dropdown-subcategory">
<span data-code="ENV01" data-image="" data-price="31.00">Environment 01</span>
<span data-code="ENV02" data-image="" data-price="32.00">Environment 02</span>
<span data-code="ENV03" data-image="" data-price="33.00">Environment 03</span>
</div>
<!-- THIS DIV IS AT INDEX 1 of: #dropdown.dropdown-subcategory -->
<!-- Will fade in when the drop_down_scroll_container index 1 is hovered -->
<div id="sports_subcategories" class="dropdown-subcategory">
<span data-code="SPRT01" data-image="" data-price="34.00">Sports 01</span>
<span data-code="SPRT02" data-image="" data-price="35.00">Sports 02</span>
<span data-code="SPRT03" data-image="" data-price="36.00">Sports 03</span>
</div>
<!-- THIS DIV IS AT INDEX 2 of: #dropdown.dropdown-subcategory -->
<!-- Will fade in when the drop_down_scroll_container index 2 is hovered -->
<div id="colleges_subcategories" class="dropdown-subcategory">
<span data-code="COLL01" data-image="" data-price="37.00">Colleges 01</span>
<span data-code="COLL02" data-image="" data-price="38.00">Colleges 02</span>
<span data-code="COLL03" data-image="" data-price="39.00">Colleges 03</span>
</div>
</div>
如果这些都没有任何意义，这是另一种看待它的方式：
当.drop_down_scroll_container中的第一个项目悬停时，jQuery会在其下方查找.dropdown-subcategory的第一个实例。当.drop_down_scroll_container中的第二个项目悬停时，jQuery将显示.dropdown-subcategory的第二个实例，依此类推。这使您可以根据需要构建任意数量的选项，而无需担心提供所有特定名称，只有订单在这种情况下很重要。那么当＆＃34;环境＆＃34;选项（谁的索引等于0）悬停，将显示索引为.dropdown-subcategory的{{1}}。这是基本的想法。
所以现在将jQuery放在一起：
0
注意：可能已经有一些开源解决方案以更优雅的方式处理这个问题。但这是我解决这个问题的方法。正如您所看到的，只需要一点点设置即可开始。您可以轻松控制css中下拉列表的样式，您可以扩展它以执行任何您想要的操作。
<强> Again, you can review a jsfiddle to see all of this code in action here.
希望这有帮助！
答案 1 :(得分：2)
我不确定这是否正是您所寻找的，但您可以尝试这样的事情：
<select name="SPECIAL" id="SPECIAL">
<option>Please Select</div>
<optgroup label="Environmental">
<option
data-img="/images/img/AnimalFriend.png"
value="1">AnimalFriend</option>
<option
data-img="/images/img/Aquaculture.png"
value="2">Aquaculture</option>
</optgroup>
<optgroup label="Sports">
<option
data-img="/images/img/ProtectOurOceans.png"
value="3">Protect Our Oceans</option>
<option
data-img="/images/img/ConserveWildlife.png"
value="4">Conserve Wildlife</option>
</optgroup>
</select>