1

我在这个 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>
4

3 回答 3

2

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

在此处输入图像描述

例子 ：

于 2013-09-10T15:14:30.470 回答
1

您可以制作一个列表元素而不是选择元素，并在单击这样的按钮时显示/隐藏它们

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

演示

于 2013-09-10T15:09:49.537 回答
1

不要使用select元素。使用divs。制作一个容器并用包装将您的选择放入其中div。然后有一个按钮动画来显示divs 的列表。那么你所需要的只是一些 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();
}
于 2013-09-10T15:07:14.213 回答