Wie schreibe ich jquery für verschiedene Dropdowns

Question

Ich versuche, 2 verschiedene Dropdowns auf einer Seite zu machen. Ich habe diesen Bootstrap-Code geschrieben -

<div class="box"> 
    <div class="box-header black"> 
     <div class="col-md-1"></div> 
     <div class="col-md-3"> 
      Set Point Management: 
     </div> 
     <div class="col-md-1"> 
      <div class="btn-group"> 
       <a class="btn dropdown-toggle info" data-toggle="dropdown" href="#"> 
        Optimized <span class="caret"></span> 
       </a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Manual</a></li> 
        <li><a href="#">Scheduled</a></li> 
        <li><a href="#">Optimized</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="clearfix"></div> 
    </div> 

    <div class="box-body"> 
     <div class="col-md-1"></div> 
     <div class="col-sm-3 col-md-3"> 
      <div class="btn-group"> 
       <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
        Select Operator <span class="caret"></span> 
       </a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">=</a></li> 
        <li><a href="#">></a></li> 
        <li><a href="#"><</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="clearfix"></div> 
    </div> 
</div> 

und ich bin mit dieser jquery den Namen des Drop-Down mit der ausgewählten Komponenten-

<script type="text/javascript"> 
    $(".dropdown-menu li a").click(function() { 
     $(".btn:first-child").html($(this).text() + ' <span class="caret"></span>'); 
    }); 
</script> 

Es funktioniert gut mit einem Drop-Down zu ändern. Aber mit zwei Dropdown-Menüs, wenn ich ein Element in einem Dropdown-Menü auswähle, ändert sich das Namensschild in beiden Dropdown-Menüs.

Ich habe versucht, sie zu unterscheiden, indem ID, aber nicht funktioniert. Also wie soll ich Jquery dafür schreiben?

(Schritt weise Antwort wäre hilfreich sein)

Answer 1

Die {selector}:first-child Pseudo-Klasse zeigt auf das erste Kind des angegebenen Selektors innerhalb eines Elternelements *. Da Ihre Zeile $(".btn:first-child") kein übergeordnetes Element angibt, werden beide .btn-Elemente auf Ihrer Seite ausgewählt. Wenn Sie diese Zeile wie folgt ändern soll es funktionieren:

$(".btn:first-child", $(this).closest("div.btn-group")).html(...) 

Der zweite Parameter das Element, in dem gibt für den Wähler zu suchen, die in diesem Fall die nächste div mit dem btn- zum a-Elemente wird Gruppenklasse.

var span = $('span:first-child'); 

... 

<div> 
    <span>Alice</span> 
</div> 
<div> 
    <span>Bob</span> 
</div> 

Während in diesem Beispiel nur Alice ausgewählt ist:

* Um zu klären, in diesem Beispiel werden beide Spannweiten gewählt werden

var span = $('span:first-child'); 

... 

<div> 
    <span>Alice</span> 
    <span>Bob</span> 
</div> 

Answer 2

Ich denke, das ist, was Sie für

jsfiddle

Code suchen:

$(".dropdown-menu").each(function() { 
var trigger = $(this).find("li a") 
var change = $(this).prev(".btn") 
    $(trigger).click(function() { 
     $(change).html($(this).text() + ' <span class="caret"></span>'); 
    }); 
});