Wie Dropdown in Searchbox in Bootstrap aktivieren

Ich entwerfe SearchBox, die eine Auswahl (Dropdown) auf der rechten Seite hat, aber wenn ich auf Dropdown drücken nichts passiert bedeutet, dass ich Dropdown-Liste Elemente nicht sehe, weiß ich nicht warum hört man nicht auf onclick. Bitte hilf mir.Wie Dropdown in Searchbox in Bootstrap aktivieren

ich will sothing wie dies aber Combo-Box tun, nicht funktioniert:

Mein Code:

<html> 
    <head> 
     <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <link rel="stylesheet" href="../css/bootstrap.css"> 
    <link rel="stylesheet" href="../css/main.css"> 
    <link rel="stylesheet" href="../css/bootstrap.min.css"> 
    </head> 
    <body> 
    <div class="container"> 
     <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">Action <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
    </ul> 
    </div><!-- /btn-group --> 
    <input type="text" class="form-control" aria-label="..."> 
    </div><!-- /input-group --> 
</div><!-- /.col-lg-6 --> 
    <div class="col-lg-6"> 
    <div class="input-group"> 
    <input type="text" class="form-control" aria-label="..."> 
    <div class="input-group-btn"> 
    <button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span  class="caret"></span></button> 
    <ul class="dropdown-menu dropdown-menu-right"> 
      <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
    </ul> 
    </div> 
    </div> 
    </div> 
</div> 
</div> 
<script type="text/javascript" src="../js/bootstrap.min.js"></script> 
<script type="text/javascript" src="../js/bootstrap.js"></script> 
</body> 
    </html>

Quelle

2016-11-06 Kabera Mugwaneza Alexis

Hallo Sie nützlich zu sein, hoffen, dass eine Teilmenge von Elementen Wählt nicht Identifizieren der Klasse an erster Stelle durch Schreiben

<button type="button" class="btn btn-default ></button>

verweisen die der Klassenname zuerst funktioniert es so etwas wie dieses

<button class="btn btn-default type="button"></button>

Verwendung dieses Drop-Down-Code

<div class="dropdown"> 
    <button class="btn btn btn-default dropdown-toggle" type="button" data- 
    toggle="dropdown">Action 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
    <li><a href="#">HTML</a></li> 
<li><a href="#">CSS</a></li> 
<li><a href="#">JavaScript</a></li> 
</ul> 
</div>

und für die ganze Arbeit Details Überprüfen Sie die unten Fiddle ich Ihre Arbeit

aktualisiert

DropDown Fiddle Demo

Quelle

2016-11-06 13:52:26

Vielen Dank @Assifuzzaman Redoy. für den Link von Ihnen oben funktioniert es, aber bilden Sie mich, es fängt nicht an zu erraten, wenn Javascript Links oder js Link ist, der ein Problem hat. –

'Sie müssen den Link hinzufügen, aber ich tat es mit genau Ihrem Code, was Sie zur Verfügung gestellt haben. Bitte lesen Sie die obige Beschreibung, wenn Sie die CDNs hinzugefügt wird es funktioniert –

Dank es funktioniert @ Asifuzzaman Redoy –

kann ich nicht eindeutig unter dem Problem stehen, sondern, wie ich verstanden, wenn Sie machen wollen Dropdown-Liste Sie

<select class="dropdown-menu"> 
    <option><a href="#">Action</a></option> 
    <option><a href="#">Another action</a></option> 
    <option><a href="#">Something else here</a></option> 
    <option role="separator" class="divider"></option> 
    <option><a href="#">Separated link</a></option> 
</select>

Das Ergebnis Dies wird verwendet werden soll:

wie diese http://www.w3schools.com/TagS/tryit.asp?filename=tryhtml_option_selected

und wenn Sie möchten von Array verwenden Filter wie diese https://docs.angularjs.org/api/ng/filter/filter

Quelle

2016-11-06 13:06:31

thaks, ich habe meine Frage aktualisiert. –

für sicher, dass Sie diese –

sicher verwenden, müssen Sie diese –

Wie Dropdown in Searchbox in Bootstrap aktivieren

Antwort

Verwandte Themen