Multi select options in a menu


Joined
Oct 30, 2022
Messages
9
Reaction score
1
Hye! I am trying to add Multi select options in a menu. Since I have added submenu in option 3 and 4. I want to select multiple options from those submenus and console(log) them and show them on top. I saw the multi select feature in a stack overflow answer(https://stackoverflow.com/a/67949799)
and tried to implement it in my code along with adding the libraries. Original stack overflow post: https://stackoverflow.com/questions...ropdown-with-the-multiple-attribute-collapsed

1667117095370.png

This is what it shows when I click on option 3! And as I try to click the drop down, nothing works i.e All menus and sub menu gets closed.

Code:
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="script.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" integrity="sha512-mR/b5Y7FRsKqrYZou7uysnOdCIJib/7r5QeJMFvLNHNhtye3xJp1TdJVPLtetkukFn227nKpXD9OjUc09lx97Q==" crossorigin="anonymous"referrerpolicy="no-referrer" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js" integrity="sha512-FHZVRMUW9FsXobt+ONiix6Z0tIkxvQfxtCSirkKc5Sb4TKHmqq1dZa8DphF0XqKb3ldLu/wgMa8mT6uXiLlRlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></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>
    <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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
  
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   Select Option
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li class="dropdown-submenu">
        <a class="dropdown-item" href="#">All</a>
        <a class="dropdown-item" href="#">Option1</a>
        <a class="dropdown-item" href="#">Option2</a>
      
        
        
        <a class="dropdown-item" href="#">Option3</a>
        
        <ul class="dropdown-menu">
       <select class="selectpicker" >       
        <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>
      </select>
      </ul>
        
        
        <a class="dropdown-submenu menu-item">
        <a class="dropdown-item" href="#">Option 4</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>

</body>
<script>
  $(document).ready(function() {
    $('.dropdown-submenu a').on("click", function(e) {
        console.log($(this));
        var txt = $(this).parent().parent().siblings('a').text() + '' + $(this).text();
        $('#dropdownMenuButton').text(txt);


      $(this).parents('ul').find('.dropdown-submenu ul').hide();
      $(this).next('ul').toggle();
      e.stopPropagation();
      e.preventDefault();
    });
  });
</script>
</html>
 
Ad

Advertisements

Joined
Jul 12, 2020
Messages
73
Reaction score
2
well for one, list item tags do not go in a "select" field tag , "option" tags do.
And "select" field tags do not go in "unordered list" tags, "list item" tags do.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top