具有选择和清除选项的DropdownList（Glyphicon删除圆圈）？

Question

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

单击glyphicon时打开我的项目列表：

选择任何一项后，我需要一些像下面的图像

我不知道如何在下拉列表中处理这个问题，或者是否有任何控制权来加入这个问题！

Answer 1

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

由于您经历了创建自定义样式下拉列表的麻烦，以便所有内容都适合于panel，因此我假设您使用它，因此这样做是为了适应它们。如果您想用于其他款式，您需要使用宽度和定位，以便它们不会重叠。

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;
}