webentwicklung-frage-antwort-db.com.de

Rufen Sie den ausgewählten Elementwert mit einer spezifischen ID aus Bootstrap DropDown ab

Ich "erstelle" meine eigene "ComboBox" mit Bootstrap 3 und JavaScript. Here is the JSFiddle für das, was ich bisher habe:

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());
});

Dieser Ansatz funktioniert gut, bis ich diese "ComboBox" auf der Seite mehrmals wiederholen möchte. Das Problem besteht darin, dass die JQuery-Funktion nach ANY/ALL '.dropdown-menu li a' sucht. 

Wie kann ich meine JQuery so ändern, dass nur für UL mit der ID Demolist aussieht und den ausgewählten-Wert erhält?

Ich habe folgendes ohne Erfolg versucht:

Ich habe '#demolist .dropdown-menu li a' ausprobiert, aber die Funktion wird nicht ausgelöst:

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

Ich habe versucht, das Click von #demolist aufzurufen, aber #datebox ruft den HTML-Code aller Listenelemente von #demolist ab und nicht das selected innerHTML-Element:

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

AKTUALISIEREN:

Die Arbeitslösungen sind:

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

ODER

$('#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

Der Selektor würde #demolist.dropdown-menu li a sein, ohne Leerzeichen zwischen id und class . Ich würde jedoch einen generischeren Ansatz vorschlagen:

<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());
});

durch die Verwendung einer Klasse anstelle einer ID und der Verwendung von parent().find() können Sie beliebig viele davon auf einer Seite anzeigen, ohne dass Js doppelt vorhanden sind

1
Steve

Entwerfen Sie Code mit 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

Funktioniert super.

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

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

    });
});
0
Michael Bobis

Hast du es gerade versucht? 

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

Für mich geht das :) 

0
Yohann Lopez

Möglicherweise möchten Sie Ihren jQuery-Code ein wenig in '#demolist li a' ändern, sodass er insbesondere den in der Verknüpfung enthaltenen Text und nicht den im Element li enthaltenen Text auswählt. Dies ermöglicht Ihnen ein Untermenü, ohne Probleme zu verursachen. Da Sie gezielt ein Tag auswählen, können Sie mit $(this).text(); darauf zugreifen.

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