Obtenir le texte sélectionné dans la liste déroulante de bootstrap

Question

J'ai une liste déroulante d'amorçage et je souhaite conserver le texte de ce qui est sélectionné. J'ai essayé la plupart des méthodes essayées ici, Obtenir la valeur de html menu déroulant dans jquery, mais il n'y a jamais eu vraiment de réponse, donc je suis toujours coincé.

<div id="tableDiv" class="dropdown">
    <button id="tableButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        Table
        <span class="caret"></span>
    </button>
    <ul id="tableMenu" class="dropdown-menu">
        <li><a href="#">Att1</a></li>
        <li><a href="#">Att2</a></li>
        <li><a href="#">Att3</a></li>
    </ul>
</div>

J'ai une fonction js qui ressemble à ceci

$("#tableMenu").click(function(){
  var selText = $("#tableMenu").text();
  document.getElementById("tableButton").innerHTML=selText;
});

Mais comme expliqué dans le lien ci-dessus, $ ("# tableMenu"). text (); renvoie tout dans la liste déroulante sous forme de chaîne, pas seulement celle souhaitée. Comment puis-je obtenir le texte uniquement à partir de celui sélectionné.

javascript jquery html twitter-bootstrap

5

Joe Johnson 9 mars 2016 à 10:33

Answer 1

Vous devez attacher le gestionnaire click() à l'élément a dans le ul qui est basculé. Vous pouvez ensuite récupérer le text() de cet élément et le définir sur le bouton associé. Essaye ça:

$("#tableMenu a").click(function(e){
    e.preventDefault(); // cancel the link behaviour
    var selText = $(this).text();
    $("#tableButton").text(selText);
});

Exemple de travail

6

Rory McCrossan 9 mars 2016 à 07:37

Answer 2

Avez-vous essayé d'utiliser une véritable liste déroulante HTML et non une liste non ordonnée?

  <select name="tableMenu" id="tableMenu" class="dropdown-menu">
    <option value="Att1">Att1</option>
    <option value="Att2">Att2</option>
    <option value="Att3">Att3</option>
  </select>

Vous devriez alors pouvoir utiliser:

var selText= document.getElementById("tableMenu").value;

0

Steve 9 mars 2016 à 07:43

Answer 3

Liez l'événement click à li et à l'aide de this, obtenez le texte sélectionné et attribuez-le au texte du bouton de l'onglet

$("#tableMenu li").click(function () {
  var selText = $(this).text();
  document.getElementById("tableButton").innerHTML = selText; // $("#tableButton").text(selText); //Using Jquery 
});

0

shu 9 mars 2016 à 08:26

Obtenir le texte sélectionné dans la liste déroulante de bootstrap

3 réponses

Questions connexes

De nouvelles questions

javascript