Menu déroulant Bootstrap

Sujet résolu

19 juillet 2017 à 13:52:41

Bonjour,

J'ai crée dynamiquement plusieurs menu deroulants avecc bootstrap, je voudrais quand je selectionne

une valeur dans l'un des menu que la valeur apparaissent dans le menu concerné.le soucis que jai la valeur

apparaisse dans tous les menus.quelqun pourrait m'aider s'il vous plait.

<body>
	<%@include file="header.jsp"%>
	<div class="container">
		<form action="meta.do" method="post">
			<c:set var="count" value="0" scope="page" />
			<c:forEach items="${map}" var="entry">
				<c:if test="${entry.value ne '[null]'}">
					<c:set var="count" value="${count + 1}" scope="page" />
					<div class="col-md-2">
						<div class="dropdown">
							<a aria-expanded="false" aria-haspopup="true" role="button"
								data-toggle="dropdown" class="dropdown-toggle" href="#">
								
								 <span id="selected">${entry.key}</span> 
								 
								 <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<c:forEach items="${entry.value}" var="valeur">
									<li><a href="#">${valeur}</a></li>
								</c:forEach>
							</ul>
						</div>
					</div>
				</c:if>
			</c:forEach>
			<c:set var="para" value="${count}" scope="session" />
			<p>
				<button type="submit" class="btn btn-primary">Ajouter</button>
			</p>
		</form>
	</div>
	<script>
	
		$('.dropdown-menu a').click(function() {
			
			$('#selected').text($(this).text());	
		});
			
	</script>
</body>

Elisabeth24

22 juillet 2017 à 16:29:15

Pour chaque menu, il y a un span avec l'identifiant selected. Il faudrait remplacer par une classe, ce qui serait plus propre.

Ensuite il faut dans le sélecteur, spécifier que c'est ce selected là que tu veux changer et pas tous.

$('.dropdown-menu a').click(function() {              
    $(this).parent().find(".selected").text($(this).text());   
});

Développeuse Web.

iboulb

24 juillet 2017 à 16:42:07

Salut Elisabeth24,

Ta réponse est juste, mais j'ai déjà résolu le problème peut être que ça pourrait aider quelqu'un d'autre.

Merci pour la solution.

-
Edité par iboulb 24 juillet 2017 à 16:42:40