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

我到处找了，但找不到我想要的工作方式。基本上，我有一个带有Twitter引导的输入组下拉列表

          <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实现这一点

---

这是带有工作下拉列表的JSFIDLE:

试试这个：

$（文档）.ready（函数（）{
$（“.add”）。在（“单击”，函数（）{
if（$（“.form control”）.val（）！=''&$（''。下拉菜单LIA:包含（“+$（“.form control”）.val（）+”）。长度<1）{
$（“.dropdown menu”）.append（“
”）
}
$（“.form control”）.val（“”）；
})
$（文档）.on（“单击”，“span.rem”，函数（）{
$（this）.最近的（“li”）.remove（）；
})
})

span.rem{
左边距：10px；
颜色：灰色；
光标：指针；
}

添加
切换下拉列表

以下是Ehsan的答案，但作为jQuery插件。一切都与表单输入有关

/**jQuery插件*/
（函数（$）{
$.fn.dynamicMenu=函数（）{
const$self=this，
$fc=$self.find（'.form-control'），
$dd=$self.find（'.dropdown menu'）；
$self.find（'.add'）。在（'click'，function（）上{
如果（$fc.val（）！=“”&&
$dd.find（'li a:contains（+$fc.val（）+'））。长度<1）{
$dd.append（$（“
”）
.append（$（'

如何在附加值的右侧放置一个“x”以将其删除？谢谢，它工作得很好！但是，有没有办法让文本在“添加”之后从输入中消失单击并使其不允许您输入同一个单词两次？@user2680614，您希望

li

s是唯一的吗？是的。如果某个值已经在下拉列表中，我不希望用户能够输入该值。此外，当用户单击“添加”时当我在一个页面上添加多个下拉列表时，输入文本框中的文本消失。当我单击“添加”按钮时，它们似乎都附加了相同的值。这可以修复吗？