2016-08-05 6 views
0

Ich weiß Variationen dieser Fragen wurden mehrmals auf dieser Website gefragt, aber ich werde es noch einmal versuchen. Ich habe das Gefühl, dass ich jede mögliche Code-Kombination ausprobiert habe, um das zu erreichen, aber ich hatte kein Glück. Alles, was ich tun möchte, ist, den 'Erweitert:' - Text auf dem Button/Dropdown-Schalter zu erhalten, um zu einer der ausgewählten Dropdown-Menüoptionen zu wechseln, wenn darauf geklickt wird (Item1, Item2, usw.).Change Button/Drop-Down-Text zu ausgewählten Dropdown-Artikel

Alle Funktionen werden natürlich nicht in meinem Code enden, aber ich wollte nur Beispiele von dem geben, was ich bereits versucht habe.

$(function() { 
      $("#dropdown").click(function() { 
       $("#AdvancedSearch").text($(this).find(":selected").text()); 
       $("#dropdown option:selected").text(); 
       var text = $("#AdvancedSearch").text($(this).text()); 
       alert(text); 
      }); 
     }); 

     $(".dropdown-menu li a").click(function() { 
      var selText = $(this).text(); 
      $(this).parents('.input-group-btn').find('.dropdown-toggle').html(selText); 
     }); 

     $(function() { 

      $("#dropdown").on('click', 'li a', function() { 
       $("#AdvancedSubmit").text($(this).text()); 
       $("#AdvancedSubmit").val($(this).text()); 
      }); 

     }); 

     $(function() { 

      $("#dropdown").click(function() { 

       $("#AdvancedSubmit").text($(this).text()); 
       $("#AdvancedSubmit").val($(this).text()); 

      }); 

     }); 


<div class="container"> 
     <div class="row buffer"> 
      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 "> 
        <div class="input-group" role="group" > 
         <div class="input-group-btn" role="group"> 
         <button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" OnClick="AdvancedSubmit();" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button> 
        <div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;"> 
         <li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li> 
         <li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li> 
         <li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li> 
        </div> 
        </div> 
        </div> 
      </div> 
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center"> 
        <div class="input-group" role="group"> 
         <input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" /> 
        </div> 
      </div> 
     </div> 
     </div> 

Antwort

1

Sie möchten eine Funktion ausführen, wenn der Benutzer auf den Listenlink klickt. Diese Funktion muss den Text in seinem eigenen Tag aufnehmen, und wir müssen diesen Text in jedes Element mit der Klasse "selection" einfügen.

$(function() { 
 
     $(".dropdown-menu li a").click(function() { 
 
      var selText = $(this).text(); 
 
      $(".selection").html(selText); 
 
     }); 
 

 
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
     <div class="row buffer"> 
 
      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 "> 
 
        <div class="input-group" role="group" > 
 
         <div class="input-group-btn" role="group"> 
 
         <button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" OnClick="AdvancedSubmit();" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button> 
 
        <div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;"> 
 
         <li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li> 
 
         <li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li> 
 
         <li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li> 
 
        </div> 
 
        </div> 
 
        </div> 
 
      </div> 
 
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center"> 
 
        <div class="input-group" role="group"> 
 
         <input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" /> 
 
        </div> 
 
      </div> 
 
     </div> 
 
     </div>

Gute Ausdauer auf Ihre Versuche!

+0

Und das ist die Kombination, die ich nicht ... habe versucht perfekt funktioniert. Völlig vergessen habe ich die span class = "selection" dort eingefügt. Danke für die Hilfe und schnelle Antwort! – ryan45366

+0

Dies könnte für eine andere Frage geeignet sein, aber da es verwandt ist, habe ich mich gefragt, ob Sie wissen, wie Sie diesen Text davon abhalten können, sich nach einer erneuten Bindung zu ändern? Nachdem der Text der Schaltfläche in die Dropdown-Auswahl geändert wurde, verwende ich diesen Text, um einen Filter für meine sqlbuilder.where-Klausel zu erstellen. Wenn ich den Suchknopf wähle, obwohl die Seite aktualisiert wird und die Änderung löscht? Irgendwelche Ideen, wie man die Änderung behält, bis der Benutzer sich entscheidet, sie zu ändern? – ryan45366

+0

Sie hatten Recht, es ist eine zu lange Frage für einen Kommentar :) – technico

0

Try this:

$(function() { 
 
    $("#dropdown a").click(function() { 
 
     $("#AdvancedSearch .selection").text('Advanced:'+$(this).text()); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<div class="container"> 
 
     <div class="row buffer"> 
 
      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 "> 
 
        <div class="input-group" role="group" > 
 
         <div class="input-group-btn" role="group"> 
 
         <button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button> 
 
        <div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;"> 
 
         <li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li> 
 
         <li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li> 
 
         <li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li> 
 
        </div> 
 
        </div> 
 
        </div> 
 
      </div> 
 
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center"> 
 
        <div class="input-group" role="group"> 
 
         <input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" /> 
 
        </div> 
 
      </div> 
 
     </div> 
 
     </div>