Bootstrap 'Buttons mit Dropdown'

Ich habe dieses Dropdown-Menü von Bootstrap. Ich habe verschiedene Kategorien, aus denen ein Benutzer auswählen kann. Wenn sie auf die Schaltfläche "Abteilung" klicken und eine Abteilung auswählen, möchte ich, dass die Schaltfläche "Abteilung" zu dem wechselt, was der Benutzer ausgewählt hat. Ich habe den HTML-Code für das Drop-down angehängt.Bootstrap 'Buttons mit Dropdown'

<form class="navbar-form navbar-left" action="{{ url_for('my_view.product_search') }}" method="GET"> 
<div class="form-group"> 
<div class="row"> 
<div class="col-lg-6"> 
    <div class="input-group"> 
    <div class="input-group-btn"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Department <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Laptops</a></li> 
     <li><a href="#">Cameras</a></li> 
     <li><a href="#">Gaming</a></li> 
     <li><a href="#">Networking</a></li> 
     <li><a href="#">Tools</a></li> 
     <li><a href="#">Headphones</a></li> 
     <li><a href="#">Speakers</a></li> 
     <li><a href="#">Miscellaneous</a></li> 
     <li><a href="#">Blu-Ray</a></li> 
    </ul> 
    </div><!-- /Dropdown Button --> 
    <input type="text" name="name" class="form-control" placeholder="Search Products..."> 
    </div><!-- /input-group --> 
<button type="submit" class="btn btn-default">Submit</button> 
</div><!-- /.col-lg-6 --> 
</div> 
</form><!-- END SEARCH FUNCTION -->

EDIT Here ist ein Link zu dem, was das Drop-Down-sieht aus wie

Quelle

2016-11-26 kstullich

können Sie/wollen Sie Javascript oder jQuery verwenden? Entschuldigung, weiß nicht viel über Python, also nicht sicher, ob es möglich ist ... – webeno

@webeno sicher, wenn ich wählen müsste würde ich gerne Javascript verwenden. (es sei denn jQuery ist einfacher/effizienter). Ich benutze ein Framework, damit ich JS darin implementieren kann. – kstullich

Sie müssen Javascript verwenden. Ich fügte ein Click-Ereignis zu den Links innerhalb des Tags <li> hinzu und ein <span> innerhalb Ihrer Schaltfläche, um eine einfache jQuery-Auswahl zu ermöglichen. Die URLs sind hier relativ zu meiner lokalen Testumgebung.

Dies ist ein funktionierendes Beispiel:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>StackOverflow Testing...</title> 
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet"> 
</head> 
<body> 

<form action method="post"> 
    <div class="row"> 
     <div class="col-lg-6"> 
      <div class="input-group"> 
       <div class="input-group-btn"> 
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="button_text">Department</span>&nbsp;<span class="caret"></span></button> 
        <ul class="dropdown-menu"> 
         <li><a class="select_option" href="#">Laptops</a></li> 
         <li><a class="select_option" href="#">Cameras</a></li> 
         <li><a class="select_option" href="#">Gaming</a></li> 
         <li><a class="select_option" href="#">Networking</a></li> 
         <li><a class="select_option" href="#">Tools</a></li> 
         <li><a class="select_option" href="#">Headphones</a></li> 
         <li><a class="select_option" href="#">Speakers</a></li> 
         <li><a class="select_option" href="#">Miscellaneous</a></li> 
         <li><a class="select_option" href="#">Blu-Ray</a></li> 
        </ul> 
       </div><!-- /Dropdown Button --> 
      <input type="text" name="name" class="form-control" placeholder="Search Products..."> 
      </div><!-- /input-group --> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </div><!-- /.col-lg-6 --> 
    </div> 
</form> 

<script charset="utf-8" type="text/javascript" src="{{ url_for('static', filename='js/jquery.min.js') }}"></script> 
<script charset="utf-8" type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script> 
<script charset="utf-8" type="text/javascript"> 
    $('a.select_option').bind('click', function() { 
     var selected = $(this).text(); 
     $('#button_text').text(selected); 
    }); 
</script> 
</body> 
</html>

Quelle

2016-11-26 21:02:27 abigperson

Danke! Das funktioniert! – kstullich

Kein Problem, froh, dass ich helfen konnte! – abigperson

Bootstrap 'Buttons mit Dropdown'

Antwort

Verwandte Themen