How to enable dropdown on searchbox in bootstrap
Question
i am designing searchBox wich has a select(dropdown ) at the right side but when i press on dropdown nothing happens means that i don't see dropdown list items ,i don't know why is not listening to onclick. please help me.
i want to do sothing like this but combo box does not work :
My 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>
2 answers
solution1
0 2016-11-06 13:06:31
I can't clearly under stand your problem but as i understood if you want to make drop down list you should use
<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>
The Result will be This :
like this http://www.w3schools.com/TagS/tryit.asp?filename=tryhtml_option_selected
and if you want to Selects a subset of items from array use Filters like this https://docs.angularjs.org/api/ng/filter/filter
I hope to be useful
solution2
0 ACCPTED 2016-11-06 13:52:26
Hello You are not identifying the class at the first place by writing
<button type="button" class="btn btn-default ></button>
refer the the class name first it will work something like this
<button class="btn btn-default type="button"></button>
use this dropdown 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>
and for the Whole Work details Check the below Fiddle I updated Your Work
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.