user2680614 user2680614 - 2 months ago 20
HTML Question

Add options to Bootstrap dropdown using Input Text Box

I've searched all over but can't find to work the way I want it. Basically, I have a input group dropdown with Twitter Bootstrap

<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button tabindex="-1" class="btn btn-default" type="button">Add</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>


I want to append options to the dropdown list when text is entered into the input box and the "Add" button is clicked. How can this be done using JQuery?

Here is the JSFiddle with the working dropdown: https://jsfiddle.net/qt3p6am0/2/

Answer

Try this :

$(document).ready(function() {
 
 $(".add").on("click",function(){
     
     if ($(".form-control").val() != '' && $(".dropdown-menu li a:contains(" + $(".form-control").val() + ")" ).length < 1 ) {
         $(".dropdown-menu").append("<li><a href='#'>" + $(".form-control").val() + "<span class=rem>x</span></a></li>")
     }
     
     $(".form-control").val('');
     
 })
 
 $(document).on("click","span.rem",function(){
     $(this).closest("li").remove();
 })
 
 })
 span.rem {
   margin-left:10px;
   color: gray;
   cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button tabindex="-1" class="btn btn-default add" type="button">Add</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu pull-right">
  <li><a href="#">Action<span class=rem>x</span></a></li>
  <li><a href="#">Another action<span class=rem>x</span></a></li>
  <li><a href="#">Separated link<span class=rem>x</span></a></li>
</ul>
</div>
</div>
                

Comments