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

Question

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

开放项目名单上glyphicon当点击：

选择的项目中的任何一个，我需要一些东西像下面的图片

我不知道如何在dropdownlist中处理这个问题，或者是否有任何控制权来获取这个问题！

Answer 1

当您更改dropdown的文本时，您可以插入​​。然后在单击​​时重置dropdown的文本。

既然你已经经历了创建一个自定义风格的下拉，所以一切都适合在panel s的麻烦，我假设你使用它，所以这是为了适应他们。如果你想用于其他风格，你需要使用宽度和定位，以便它们不重叠。

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