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

标志右侧有16px的边距，因此它们不会隐藏在选项箭头下。

演示：http://jsfiddle.net/2j46orr4/7/ （Chrome目前似乎没有呈现选项＆gt;背景图片。）

Answer 2

你可以使用像这样的jquery插件。

这里：http://designwithpc.com/Plugins/ddSlick#demo

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

2 个答案: