使用输入文本框将选项添加到 Bootstrap 下拉列表

Question

我已经搜索了所有内容，但找不到我想要的工作方式。基本上，我有一个带有 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>

当在输入框中输入文本并单击“添加”按钮时，我想将选项附加到下拉列表中。如何使用 JQuery 来完成？

这是带有工作下拉列表的 JSFiddle：https://jsfiddle.net/qt3p6am0/2/

Answer 1

试试这个：

$(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>
                

Answer 2

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

Answer 3

这是 Ehsan 的答案，但作为一个 jQuery 插件。一切都与表单输入相关。

/** 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>