Twitter Bootstrap Question posted in

Add options to Bootstrap dropdown using Input Text Box – Twitter bootstrap

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/

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Here is Ehsan’s answer, but as a jQuery plugin. Everything is relative to the form input.

    /** jQuery plugin */
(function($) {
  $.fn.dynamicMenu = function() {
    const $self = this,
          $fc   = $self.find('.form-control'),
          $dd   = $self.find('.dropdown-menu');
    $self.find('.add').on('click', function() {
      if ($fc.val() != '' &&
          $dd.find('li a:contains(' + $fc.val() + ')').length < 1) {
        $dd.append($('<li>')
          .append($('<a>').text($fc.val())
            .append($('<span>').addClass('rem'))));
      }
      $fc.val('');
    });
    $dd.on('click', 'span.rem', function() {
      $(this).closest('li').remove();
    });
  };
})(jQuery);


$('.example').dynamicMenu(); // ~= .input-group
    .dropdown-menu li {
  position: relative;
}

.dropdown-menu li span.rem {
  position: absolute;
  color: gray;
  cursor: pointer;
  right: 1em;
}

.dropdown-menu li span.rem:after {
  content: '0D7';
}
    <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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<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"></script>

<div class="container">
  <div class="input-group example">
    <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></span></a></li>
        <li><a href="#">Another action<span class=rem></span></a></li>
        <li><a href="#">Separated link<span class=rem></span></a></li>
      </ul>
    </div>
  </div>
</div>
    Login or Signup to reply.
  3. 0 
    $('.input-group .dropdown-menu.pull-right').last().append(`<li><a href="#">New link</a></li>`)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search