select选项中的照片不使用chrome

photos in select-option are not shawn in chrome?

本文关键字：chrome 照片 选项 select      更新时间：2023-09-26

我对select选项有点问题！问题是，如果我把照片放在列表中，它们会显示在Fire Fox中，但在chrome中不会！！

这是我的代码：

function change() {
 
select = document.getElementById("select");
select_s = select.style;
 
switch(select.selectedIndex) {
 
case 0 :
select_s.background = "url('http://apistudyabroad.wpengine.netdna-cdn.com/wp-content/themes/API-custom/images/study_abroad_uae_flag.png') no-repeat";
break;
 
case 1 :
select_s.background = "url('http://apistudyabroad.wpengine.netdna-cdn.com/wp-content/themes/API-custom/images/study_abroad_uae_flag.png') no-repeat";
break;
}
}
<body>
 
<select id="select" onchange="change();">
<option style="background:url('http://apistudyabroad.wpengine.netdna-cdn.com/wp-content/themes/API-custom/images/study_abroad_uae_flag.png') no-repeat; width:100px; height:100px;"></option>
<option style="background:url('http://apistudyabroad.wpengine.netdna-cdn.com/wp-content/themes/API-custom/images/study_abroad_uae_flag.png') no-repeat; width:100px; height:100px;" </option>
</select>
 
 
</body>

谢谢你的帮助！

我想没有办法做到这一点。只有Firefox支持这个功能，为了在其他浏览器中完成这项工作，你应该使用一些JQuery插件。

请改为检查ddSlick，在您的情况下

可能很有用
<select id="select" onchange="change();">
<option style="background:url('http://apistudyabroad.wpengine.netdna-cdn.com/wp-content/themes/API-custom/images/study_abroad_uae_flag.png') no-repeat; width:100px; height:100px;"></option>
<option style="background:url('http://apistudyabroad.wpengine.netdna-cdn.com/wp-content/themes/API-custom/images/study_abroad_uae_flag.png') no-repeat; width:100px; height:100px;"></option>
</select>

以上代码适用于Firefox和Webkit浏览器。对于其他可以使用JQuery UI的浏览器，请找到下面的链接

http://docs.jquery.com/UI/Selectable

你也可以试试这个http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx

来源：如何为选择框中的选项添加背景图像？

相关文章：