Несколько опционных групп при выборе начальной загрузки - PullRequest
Новая
       48

Несколько опционных групп при выборе начальной загрузки

0 голосов
/ 26 мая 2018

У меня есть выбор начальной загрузки с несколькими странами со всего мира

Турция Испания Индия Китай ОАЭ Франция Португалия Канада США

Указанные страны классифицируются по регионам.Например, регион EMEA = Турция, Испания, Франция, регион Северная Америка = Канада, США и т. Д.

У меня есть названия стран в раскрывающемся списке начальной загрузки, который работает нормально и работает по назначению.Но мне нужно иметь возможность выбирать целые группы опций за один раз на «Регион».

Например, в том же выпадающем меню мне нужен верхний раздел выпадающего списка с именами регионов, и когда я выбираю один изрегионы, он должен автоматически выбирать страны-члены далее в раскрывающемся списке.

В качестве альтернативы мне нужно, чтобы все страны в одном регионе были сгруппированы в один блок с возможностью выбора всей этой подгруппы.

Спасибо за помощь.

1 Ответ

0 голосов
/ 26 мая 2018

надеюсь, что этот код будет работать для вас: 

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

...