使用输入文本框添加引导下拉列表的选项。

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?

当文本输入到输入框并单击“添加”按钮时，我想在下拉列表中添加选项。如何使用JQuery实现这一点?

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

下面是工作下拉菜单的JSFiddle: https://jsfiddle.net/qt3p6am0/2/

1 个解决方案

#1

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>