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