Tengo un formulario de arranque que he agregado una lista desplegable. Cuando hago clic en el menú desplegable, veo la lista, pero cuando hago clic en ella no aparece como seleccionada, todavía muestra "seleccionar dominio" todo el tiempo. encontré este enlace
https://www.codeply.com/go/pTWA3jYWEv/bootstrap-bootstrap-dropdown-selected-value
Lo he modificado, pero me falta algo porque no me funciona.
<div class="form-group"> <div class="dropdown"> <button class="btn btn-primary btn-user btn-block dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Select Domain <span class="caret"></span> </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item">Corp</a> <a class="dropdown-item">Domain2</a> <a class="dropdown-item">Domain3</a> <a class="dropdown-item">Local</a> </div> </div> </div> <script type="text/javascript"> $(".dropdown-menu li a").click(function(){ var selText = $(this).text(); $(this).parents('.dropdown').find('.btn btn-primary btn-user btn-block dropdown-toggle').html(selText+' <span class="caret"></span>'); }); </script>Para que funcione el menú desplegable de Bootstrap, agregue las siguientes referencias de CDN en el documento HTML del proyecto. Además, seleccione ".dropdown-menu a" para capturar el elemento <a> en el que se hizo clic. La solución a continuación proporciona una manera fácil de cambiar el texto del elemento <button> cuyo id es dropdown-button cuando se hace clic en el botón desplegable.
$(".dropdown-menu a").click( function() { console.clear(); console.log($(this).text()); var selText = $(this).text(); $('#dropdown-button').html(`${selText} <span class="caret"></span>`) }); .caret { display: inline-block; width: 13px; height: 13px; background-color: lightgray; } <!-- Add the following CDN references to the project. --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> <div class="form-group"> <div class="dropdown"> <!-- Added id attribute to this element. --> <button id="dropdown-button" class="btn btn-primary btn-user btn-block dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Select Domain <span class="caret"></span> </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item">Corp</a> <a class="dropdown-item">Domain2</a> <a class="dropdown-item">Domain3</a> <a class="dropdown-item">Local</a> </div> </div> </div>