获取下拉选择列表以在选择后保持扩展

Question

我在这个jsfiddle中有一个下拉框 - http://jsfiddle.net/stevea/DFBdk/1/ - 它包含一个可以删除的文件列表。因此，在实际应用程序中，对于要删除的每个文件，您需要下拉列表，选择文件，删除文件，然后关闭下拉列表。然后，如果要删除另一个文件，则必须再次将其删除并选择另一个文件。我想要的是让列表保持不变，这样你就可以一个接一个地点击一个文件来删除许多文件。要在完成后关闭列表，您可以再次单击下拉箭头。

有没有人看到使用jQuery的方法来实现这种行为？我曾尝试使用selectedIndex进行欺骗，但这只是在关闭时控制下拉列表中显示的项目。

由于

<select id="delete_dropdown" title="delete a page" name="loads">
    <option value="" selected="selected">DELETE</option>
    <option value="DigDil">DigDil</option>
    <option value="a2">a2</option>
    <option value="bob">bob</option>
    <option value="box1">box1</option>
    <option value="box12a">box12a</option>
    <option value="box12d">box12d</option>
    <option value="box17">box17</option>
    <option value="box18">box18</option>
    <option value="box1z">box1z</option>
    <option value="box32">box32</option>
    <option value="box34">box34</option>
    <option value="box789">box789</option>
    <option value="box88">box88</option>
    <option value="box92">box92</option>
    <option value="box93">box93</option>
    <option value="box94">box94</option>
    <option value="boxaa">boxaa</option>
    <option value="boxbb">boxbb</option>
    <option value="boxcc">boxcc</option>
    <option value="boxdd">boxdd</option>
    <option value="boxee">boxee</option>
    <option value="bx12">bx12</option>
    <option value="c1">c1</option>
    <option value="cateye">cateye</option>
    <option value="cdf">cdf</option>
    <option value="dfr">dfr</option>
    <option value="dg">dg</option>
    <option value="dg4">dg4</option>
    <option value="dg5">dg5</option>
</select>

Answer 1

您是否考虑过使用multiple属性？

example :

Answer 2

不要使用select元素。使用div s。使用包装div制作一个容器并在其中容纳您的选项。然后有一个动画按钮来显示div的列表。然后你只需要一些CSS来让它们看起来很漂亮。

这样的事情：

<style>
    .container div {
       display:none;
    }
</style>


<div class="container"
    <div>option1</div>
    <div>option2</div>
    <div>option3</div>
    <div>option4</div>
    <div>option5</div>
    <div>option6</div>
</div>

$("button").on("click", function() {
    $(".container").children().toggle();
}

Answer 3

您可以创建一个列表元素而不是选择元素，并在单击此按钮时显示/隐藏它们

<强> HTML

<ul>
    <li>1</li>
    <li>2</li>
</ul>

<强>的jQuery

$('label:first').on('click', function () {
    $('ul').toggle();
});
$('ul li').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
});
$('label:last').on('click', function () {
    $('li.selected').remove();
});

DEMO