Question

我在jsfiddle中有一个<select>元素 - http://jsfiddle.net/stevea/ekuSd/ - 我想在每个选项的右侧添加一个红色的x图标，以便用户能够删除该选项。我试过在标签之间的区域粘贴img标签，但这不起作用。有没有人看到这样做的方法？

感谢。

<select id="filename">
    <option value="File" selected="">[File name]</option>
    <option value="file1.html">file1</option>
    <option value="file2.html">file2</option>
    <option value="file3.html">file3</option>
    <option value="file4.html">file4</option>
</select>

Answer 1

如果您想使用图像进行跨浏览，而不是像@Tucker建议的Unicode字形，则必须使用JavaScript小部件。

我个人推荐jQueryUI的Selectable。

Answer 2

你不能直接这样做。然后，您有两个选择：

您可以伪造自己的选择，以便在选项中添加html元素。你需要写很多javascript和css行，或者使用插件，比如@hungerpain说。
您可以拥有外部x图标：

<select id="filename">
    <option value="File" selected class="placeholder">[File name]</option>
    <option value="file1.html">file1</option>
    <option value="file2.html">file2</option>
    <option value="file3.html">file3</option>
    <option value="file4.html">file4</option>
</select>
<span id="delete">✖</span>

option.placeholder{
    display:none;
}
#delete{
    cursor:pointer;
}

var del = document.getElementById('delete'),
    sel = document.getElementById('filename');
del.onclick = function(){
    var opt = sel.options[sel.selectedIndex];
    if(opt.className !== 'placeholder'){
        sel.removeChild(opt);
    }
};

演示：http://jsfiddle.net/7AhSN/

Answer 3

这里没有任何建议对我有吸引力。我认为可能有一种轻松的方式让我忽略，但显然情况并非如此。我认为我会让人从下拉列表中选择一个特定的文件，然后在显示文件时，提供一种方法来删除它。这可能更好，因为你可以确切地看到你正在删除的内容，而不仅仅是删除文件名。

将删除图标添加到<select> </select> </option>的每个<option>元素

3 个答案: