选择列表中的下拉子菜单答案

【问题标题】：dropdown submenu in selection list选择列表中的下拉子菜单
【发布时间】：2018-09-27 21:27:34
【问题描述】：

我创建了一个带有省份名称的下拉菜单，并在每个省份下方提到了其城市。我希望这些城市在点击时出现在省份左侧的子菜单中。

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

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

select 不是此任务的正确元素，a dropdown is much better 适合。

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

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

【讨论】：

我在表单中使用选择标签 .... 不需要导航栏或菜单。主要问题是单击选择列表中的选项时如何显示另一个列表。
你不能用选择列表做到这一点，你需要使用不同的元素

【解决方案2】：

希望，这会有所帮助。我们可以使用，

而不是选择。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>
            .dropdown-submenu {
                position: relative;
            }

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

            .dropdown {
                width: 100px;
            }
        </style>
    </head>
    <body>

        <div class="container">
            <div class="dropdown">
                <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">Select State
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li class="dropdown-submenu">
                        <a class="test" tabindex="-1" href="#">Eastern Cape <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a tabindex="-1" href="#">Umtata / Mthatha</a></li>
                            <li><a tabindex="-1" href="#">Willowmore</a></li>
                            <li><a tabindex="-1" href="#">Willowvale</a></li>
                        </ul>

                    </li>
                    <li class="dropdown-submenu">
                        <a class="test" tabindex="-1" href="#">Free State <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a tabindex="-1" href="#">Umtata / Mthatha</a></li>
                            <li><a tabindex="-1" href="#">Willowmore</a></li>
                            <li><a tabindex="-1" href="#">Willowvale</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>

    </body>
</html>

【讨论】：