我目前正在尝试使用 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>
最佳答案
解决方案 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。)
关于javascript - jQuery - 添加图标以根据值选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27250091/