Question

我有来自世界各地的几个国家的引导选择

土耳其西班牙印度中国阿联酋法国葡萄牙加拿大 USA

以上国家/地区按地区分类。例如。地区EMEA =土耳其，西班牙，法国，地区NorthAmerica =加拿大，美国等

我在bootstrap-select下拉列表中有国家名称，这很好并按预期工作。但我需要能够在每个“区域”中一次选择整个选项组。

E.g。在同一下拉列表中，我需要使用区域名称的下拉列表的顶部，当我选择其中一个区域时，它需要在下拉列表中自动选择成员国家。

或者，我需要在一个区域下分组的所有国家/地区，并且可以选择所有该子组。

感谢您的帮助。

Answer 1

希望此代码适合您：

<div class="container">
  <h2>Multi-Level Dropdowns</h2>
  <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
  <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">India <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">Kolkata</a></li>
          <li><a tabindex="-1" href="#">bangalore</a></li>
          <li><a tabindex="-1" href="#">Mumbai</a></li>
          <li><a tabindex="-1" href="#">Pune</a></li>
         </ul>
      </li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#"> EMEA <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">Turkey</a></li>
          <li><a tabindex="-1" href="#">Spain</a></li>
          <li><a tabindex="-1" href="#">France</a></li>
        </ul>
      </li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">North America <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">Canada</a></li>
          <li><a tabindex="-1" href="#">USA</a></li>
         </ul>
      </li>
    </ul>
  </div>
</div>

<script>
  $(document).ready(function(){
    $('.dropdown-submenu a.test').on("click", function(e){
      $(this).next('ul').toggle();
      e.stopPropagation();
      e.preventDefault();
    });
  });
  </script>

看看它：https://jsfiddle.net/ge6c5Lym/

引导选择上的多个选项组

1 个答案: