我的问题解决方案

Question

我要做的是将下拉菜单分开。在这个例子中有五个选项如何将下拉分割成类别？例如，选项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">&times;</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');
        });
    });

非常感谢任何帮助!!

Answer 1

我不知道如何附加＆＃34;悬停＆＃34;标准下拉菜单的事件监听器，但使用jquery，html和css实现自己的自定义下拉列表并不算太多。

自定义下拉优势＃01

您可以根据需要为每个条目分配尽可能多的自定义值。

在您的示例中，您有＆＃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下拉列表，你就没有那么多的自由。有一些方法可以扩展与标准下拉列表相关联的值，但是获取值非常混乱，您仍然无法访问功能所需的悬停行为。

自定义下拉优势＃02

您实际上可以以任何方式使用悬停行为。

在您的示例中，您需要＆＃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放在一起：

注意：可能已经有一些开源解决方案以更优雅的方式处理这个问题。但这是我解决这个问题的方法。正如您所看到的，只需要一点点设置即可开始。您可以轻松控制css中下拉列表的样式，您可以扩展它以执行任何您想要的操作。

<强> Again, you can review a jsfiddle to see all of this code in action here.

希望这有帮助！

Answer 2

我不确定这是否正是您所寻找的，但您可以尝试这样的事情：

＆＃13;

    <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>

＆＃13;

下拉菜单类别/子类别

2 个答案:

自定义下拉优势＃01

自定义下拉优势＃02

我的问题解决方案