带有选择和清除选项的下拉列表（字形删除圆圈）？答案

【问题标题】：DropdownList with Selection and Clear Option (Glyphicon remove circle)?带有选择和清除选项的下拉列表（字形删除圆圈）？
【发布时间】：2015-09-17 21:03:15
【问题描述】：

我想达到以下标准：当列表展开时显示可能选项的列表，并且能够通过在所选值旁边提供清除选项来清除所选值。任何想法如何获得这个？（附图片供参考）

单击字形图标时打开我的项目列表：

选择任何一个项目后，我需要一些类似下图的东西

我不知道如何在下拉列表中处理这个，或者是否有任何控件可以访问这个！！！

【问题讨论】：

到目前为止你尝试过什么？当然，您所做的不仅仅是从不同的站点拍摄一些照片吗？提供一些代码。
@Ozan 这是 js fiddle jsfiddle.net/bseth99/dJDHd 。好吧，我从不同的网站拍了一些照片来理解我的问题有点容易（这些只是示例参考）。

标签： jquery asp.net-mvc twitter-bootstrap drop-down-menu listbox

【解决方案1】：

您可以在更改dropdown 的文本时插入glyphicon。然后在点击glyphicon时重置dropdown的文字。

由于您已经经历了创建自定义样式下拉列表以使所有内容都适合小panels 的麻烦，因此我假设您使用它，因此这是为了适合它们。如果您想用于其他样式，则需要调整宽度和位置，以免它们重叠。

JsFiddle

Javascript

$(document.body).on('click', '.dropdown-menu li', function (event) {

    var $target = $(event.currentTarget),
        $bg = $target.closest('.btn-group');

    $bg.find('[data-bind="label"]').text($target.text())
        .end()
        .children('.dropdown-toggle').dropdown('toggle');

    if (!$bg.next("i.deselect").length) {
        $("<i class='glyphicon glyphicon-remove-circle deselect'>").insertAfter($bg);
        $bg.width($bg.width() - 25);
    }

    return false;

});

$(document).on("click", "i.deselect", function () {
    var $bg = $(this).prev(".btn-group");
    $bg.width($bg.width() + 25)
        .find('[data-bind="label"]').text("Select One");
    $(this).remove();
});

CSS

.btn-input {
    display: block;
}

.btn-input .btn.form-control {
    text-align: left;
}

.btn-input .btn.form-control span:first-child {
    left: 10px;
    overflow: hidden;
    position: absolute;
    right: 25px;
}

.btn-input .btn.form-control .caret {
    margin-top: -1px;
    position: absolute;
    right: 10px;
    top: 50%;
}

i.deselect {
    float: right;
    margin: -26px -5px 0 0;
    cursor: pointer;
    font-size: 16px;
}

【讨论】：

谢谢老兄！！我可以调整文本的位置样式。