web-dev-qa-db-fra.com

Obtenir la valeur de l'élément sélectionné à partir de Bootstrap DropDown avec un ID spécifique

Je "crée" ma propre "ComboBox" en utilisant Bootstrap 3 et JavaScript. Here is the JSFiddle pour ce que j'ai jusqu'à présent:

HTML:

<div class="input-group">                                            
    <input type="TextBox" ID="datebox" Class="form-control"></input>
    <div class="input-group-btn">
        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul id="demolist" class="dropdown-menu">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul>
    </div>
</div>

JavaScript:

$(document).on('click', '.dropdown-menu li a', function() {
    $('#datebox').val($(this).html());
});

Cette approche fonctionne très bien jusqu'à ce que je veuille répéter ce "ComboBox" plusieurs fois sur la page. Le problème est lié à la fonction JQuery recherchant ANY/ALL '.dropdown-menu li a'. 

Comment puis-je changer mon JQuery pour qu'il recherche uniquement _LU avec un ID demolist _ et obtenir sa valeur sélectionnée?

J'ai essayé ce qui suit sans succès:

J'ai essayé '#demolist .dropdown-menu li a' mais cela ne déclenchera pas la fonction:

$(document).on('click', '#demolist .dropdown-menu li a', function() {
    $('#datebox').val($(this).html());
});

J'ai essayé d'appeler le clic sur #demolist mais #datebox obtient le code HTML de l'élément de liste de #demolist et non le sélectionné innerHTML de l'élément:

$('#demolist').on('click', function(){
    $('#datebox').val($(this).html());
});

METTRE À JOUR:

Les solutions de travail sont:

$('#demolist li a').on('click', function(){
    $('#datebox').val($(this).html());
});

OU

$('#demolist li').on('click', function(){
    $('#datebox').val($(this).text());
});
javascriptjqueryhtmltwitter-bootstrap
26
lucidgold
$('#demolist li').on('click', function(){
    $('#datebox').val($(this).text());
});

http://jsfiddle.net/kcpma/18/

29
Ryan

Le sélecteur serait #demolist.dropdown-menu li a note aucun espace entre id et class ..__ Cependant, je suggérerais une approche plus générique:

<div class="input-group">                                            
    <input type="TextBox" Class="form-control datebox"></input>
    <div class="input-group-btn">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
    </ul>
</div>


$(document).on('click', '.dropdown-menu li a', function() {
    $(this).parent().parent().parent().find('.datebox').val($(this).html());
});

en utilisant une classe plutôt que l'id et en utilisant parent().find(), vous pouvez en afficher autant que vous le souhaitez sur une page, sans duplication

1
Steve

Code de conception utilisant Bootstrap

<div class="dropdown-menu" id="demolist">
  <a class="dropdown-item" h ref="#">Cricket</a>
  <a class="dropdown-item" href="#">UFC</a>
  <a class="dropdown-item" href="#">Football</a>
  <a class="dropdown-item" href="#">Basketball</a>
</div>

  • jquery code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    $('#demolist a').on('click', function () {
      var txt= ($(this).text());
      alert("Your Favourite Sports is "+txt);
    });
  });
</script>

0
TauFeeQ

Fonctionne très bien.

<input type="text" name="cat_q" id="cat_q">  

$(document).ready(function(){
    $("#btn_cat div a").click(function(){
       alert($(this).text());

    });
});
0
Michael Bobis

As-tu juste essayé 

$('#datebox li a').on('click', function(){
    //$('#datebox').val($(this).text());
    alert($(this).text());
});

Ça marche pour moi :) 

0
Yohann Lopez

Vous voudrez peut-être modifier un peu votre code jQuery en '#demolist li a' afin qu'il sélectionne spécifiquement le texte qui se trouve dans le lien plutôt que le texte qui se trouve dans l'élément li. Cela vous permettrait d'avoir un sous-menu sans causer de problèmes. De plus, puisque vous sélectionnez spécifiquement le tag, vous pouvez y accéder avec $(this).text();.

$('#datebox li a').on('click', function(){
    //$('#datebox').val($(this).text());
    alert($(this).text());
});
0
JoBaxter