2

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/

Improve this question

3 Answers 3

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

How would I place an "x" to the right of the appended value allowing for it to be removed?
Thanks it works perfectly! But, is there any way to have the text disappear from the input after "Add" is clicked and make it so that you are not allowed to enter the same word twice?
@user2680614 , you want lis be Unique?
Yes. I don't want a user to be able to enter some value if that value is already in the dropdown list. Also, when a user clicks "Add" the text within the input text box disappears
When I add multiple dropdowns on one page they all seem to append the same value when I click add button. Can this be fixed?
|
2

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: '\00D7';
}
<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>

Improve this answer

Comments

0 
$('.input-group .dropdown-menu.pull-right').last().append(`<li><a href="#">New link</a></li>`)
Improve this answer

2 Comments

you have to wrap what inside the append with (` `)
Use Jquery Library pls

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.