选择列表中的下拉子菜单 [英] dropdown submenu in selection list

问题描述

我创建了一个带有省名称的下拉菜单，并且在每个省下方都提到了其城市名称.我希望这些城市在单击时显示在省左侧的子菜单中.

i have created a dropdown menu with provinces name and below each province its citesties are mentioned. I want these cities to appear in submenu on left side of province when it is clicked.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<select name="campus" id="campuslocation" class="browser-default" required="">
  <optgroup label="Eastern Cape">
    <option value="31">Umtata / Mthatha</option>
    <option value="32">Willowmore</option>
    <option value="33">Willowvale</option>
  </optgroup>
  <optgroup label="Free State">
    <option value="47">Koppies</option>
    <option value="48">Kroonstad</option>
  </optgroup>
</select>

推荐答案

select不是此任务的正确元素，

select is not the right element for this task, a dropdown is much better suited.

没有默认的创建子菜单的方法，但是很容易实现.

There is no default way to create submenus but it's easy enough to achieve.

$(document).ready(function() {
  $('.dropdown-submenu a').on("click", function(e) {
    $(this).parents('ul').find('.dropdown-submenu ul').hide();
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    All South Africa
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li class="dropdown-submenu">
      <a class="dropdown-item" href="#">Eastern Cape</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Umtata / Mthatha</a></li>
        <li><a class="dropdown-item" href="#">Willowmore</a></li>
        <li><a class="dropdown-item" href="#">Willowvale</a></li>
      </ul>
    </li>
    <li class="dropdown-submenu">
      <a class="dropdown-item" href="#">Free State</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Koppies</a></li>
        <li><a class="dropdown-item" href="#">Kroonstad</a></li>
      </ul>
    </li>
  </ul>
</div>

这篇关于选择列表中的下拉子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！