javascript - jQuery - 添加图标以根据值选择选项

Question

我目前正在尝试使用 Polylang，这是一个允许向网站添加语言切换器的 Wordpress 插件。

它目前生成简单的选择下拉菜单并在选择语言时更改语言，所以没关系，但是我无法正确设置它的样式 - 它是一个原始下拉菜单。

我想在显示的选项旁边添加图标，据我所知，jQuery 是我最好的选择。

我遇到的问题是 <option>标签丢失 id或 class标签，如果不修改插件本身，就不可能添加它们。

是否可以创建一个 jquery 脚本，根据它的 value 在选项旁边显示一个标志？属性？

你能给我举个例子吗？

<select name="lang_choice" id="lang_choice">
<option value="en">English</option>
<option value="fr" selected="selected">French</option>
<option value="de">Deutsch</option>
</select>

Answer 1

解决方案 1(在下拉列表外标记):

试试这个:

$('<img class=flagicon src="'+$("select#lang_choice").val()+'.png">').insertAfter("#lang_choice");
$("select#lang_choice").change(function(){
    $(".flagicon").attr("src", $("select#lang_choice").val()+'.png');
});

该函数假定您的标志名为 fr.png、de.png 和 en.png第一行添加第一个图标，如果尚未更改任何选项。

JSFiddle:http://jsfiddle.net/2j46orr4/1/

解决方案 2(下拉菜单中的标志，每个选项都有自己的背景图像):如果要在选项内显示标志，请使用背景图像:

CSS:

#lang_choice {
    background-repeat: no-repeat;
    background-image: url(/img/en.png);
    background-position: right center;
    padding-right: 20px;
}
#lang_choice option:nth-child(1) {
    background: url(/img/en.png) no-repeat right center;  
}
#lang_choice option:nth-child(2) {
    background: url(/img/fr.png) no-repeat right center;  
}
#lang_choice option:nth-child(3) {
    background: url(/img/de.png) no-repeat right center;  
}

jQuery:

$("select#lang_choice").css("background-image",'url(/img/'+$("select#lang_choice").val()+'.png)');
$("select#lang_choice").change(function(){
    $("select#lang_choice").css("background-image",'url(/img/'+$("select#lang_choice").val()+'.png)');
});

旗帜的右侧有 16 像素的边距，因此它们不会隐藏在选项箭头下。

演示:http://jsfiddle.net/2j46orr4/7/(Chrome 目前似乎没有呈现选项 > background-image。)