Bootstrap button-group value is not changing in dropdown menu list

JavaScript
,
1

Dear All,

I am making a search form in that I am using Button group and dropdown menu (ul, li list).
while clicking on the dropdown menu the value should change, but its not changing at all,
please suggest me some methods how I can achieve it.

I am using bootstrap version 2.1.1 and using js like jquery, bootstrap-min, bootstrap-dropdown.js etc.

732×135 34.5 KB

<form class="form-search pull-right" style="margin-top:20px;">
	<div class="input-prepend input-append">
           <div class="btn-group">
		<button class="btn dropdown-toggle" id="choices" data-toggle="dropdown">Search By <span class="caret"></span></button>
			<ul class="dropdown-menu" style="min-width:94px" >
			    <li><a href="#">Product</a></li>
			    <li><a href="#">Buy Lead</a></li>
			</ul>
		 </div><!-- /btn-group -->
              <input type="text" class="span2" id="appendedPrependedDropdownButton 
           <div class="btn-group">
      <button class="btn" data-toggle="dropdown" type="submit">Search</button>
   </div><!-- /btn-group -->
</div>										
</form>
2

There is an error in the code you pasted here.

              <input type="text" class="span2" id="appendedPrependedDropdownButton 
           <div class="btn-group">

If this is representative of you HTML it will have a direct effect on your results.

3

Hi,

I assume you wanted something like a select element where the value changes to reflect the choice? You would need to script that action.

Something like this perhaps?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
 <script src="http://getbootstrap.com/2.3.2/assets/js/html5shiv.js"></script>
<![endif]-->

</head>
<body>
<form class="form-search pull-right" style="margin-top:20px;">
		<div class="input-prepend input-append">
				<div class="btn-group sort-criteria">
						<button class="btn dropdown-toggle" id="choices" data-toggle="dropdown">Search by: <span class="sort-selection"></span> <span class="caret"></span></button>
						<ul class="dropdown-menu" style="min-width:94px" >
								<li><a class="sortSelect sort-criteria-selected" href="#">Product</a></li>
								<li><a class="sortSelect" href="#">Buy Lead</a></li>
						</ul>
				</div>
				<!-- /btn-group -->
				<input type="text" class="span2" id="appendedPrependedDropdownButton">
				<div class="btn-group">
						<button class="btn" data-toggle="dropdown" type="submit">Search</button>
				</div>
				<!-- /btn-group --> 
		</div>
</form>
<script src="http://getbootstrap.com/2.3.2/assets/js/jquery.js"></script> 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script> 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-alert.js"></script> 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script> 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script> 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-scrollspy.js"></script> 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script> 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script> 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-popover.js"></script> 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-button.js"></script> 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-collapse.js"></script> 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script> 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-typeahead.js"></script> 

<!-- sort by dropdown --> 
<script type="text/javascript">
$( ".sort-criteria" ).on( "click",".sortSelect", function(e) {
		var optionSelected = ($( this ).text());
  var parent = $(this).closest('.sort-criteria');
		parent.find('.sort-selection').text(optionSelected);
		parent.find('.sortSelect').removeClass('sort-criteria-selected');
  $(this).addClass('sort-criteria-selected');
		e.preventDefault();
});
</script>
</body>
</html>

The button toggle you are using is just a basic menu and would usually take you to a destination or possibly picked up by a script to carry out the action you need.

Of course it would be better to use a real select element and then swap it out with JS as required but that would be a job for one of the JS experts here as that is beyond my meagre skills.

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.