javascript - dropdown with form fields bootstrap 3 -
i'm trying build dropdown functions in image below (or go kayak's website):
i need dropdown field within dropdown field, , need couple of fields allow incrementing/decrementing.
i couldn't dropdown within dropdown work right. tried variations of following:
i've tried variations of:
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> dropdown <span class="caret"></span> </button> <form> <div class="dropdown form-group clearfix"> <button class="btn btn-dropdown dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">fare class <span class="caret"></span></button> <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> <li role="presentation" class="mas10px"><a role="menuitem" href="#">economy</a></li> <li role="presentation" class="mas10px"><a role="menuitem" href="#">business</a></li> <li role="presentation" class="mas10px"><a role="menuitem" href="#">first</a></li> </ul> </div> </form> </div>
i didn't know begin increment parts of each text field.
any thoughts on how this?
update: can't keep main dropdown open able click on dropdown or increment/decrement field within main dropdown. main dropdown closes on me. below latest code:
<div class="dropdown"> <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">dropdown example <span class="caret"></span></button> <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> <li> <div class="dropdown form-group clearfix"> <button class="btn btn-dropdown dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">fare class <span class="caret"></span></button> <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> <li role="presentation" class="mas10px"><a role="menuitem" href="#">economy</a></li> <li role="presentation" class="mas10px"><a role="menuitem" href="#">business</a></li> <li role="presentation" class="mas10px"><a role="menuitem" href="#">first</a></li> </ul> </div> <div class="container"> <h2>bootstrap counter field</h2> <div class="row"> <div class="col-sm-3"> <div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]"> <span class="glyphicon glyphicon-minus"></span> </button> </span> <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10"> <span class="input-group-btn"> <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> </div> </div> </div> </li> </ul> </div>
Comments
Post a Comment