向每个<option>元素添加一个删除图标<select>

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

谢谢。

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

来源

2013-07-25 Steve

你必须使用这个插件。 – krishgopinath

如果你想这样做，跨浏览器的图像，而不是与像@Tucker提出一个Unicode字形，你将不得不使用JavaScript控件。我个人推荐jQueryUI的Selectable。

来源

2013-07-25 02:24:53 federicot

你不能直接做到这一点。然后，您有两个选项：

您可以伪造自己的选择，以便您可以在选项中添加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/

来源

2013-07-25 02:24:57 Oriol

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

来源

2013-07-25 04:04:18 Steve

向每个<option>元素添加一个删除图标<select>

回答

相关问题