javascript - HTML 下拉功能

Question

我有一个 HTML 下拉列表:

<select>
 <option value="PK" style=""><span>Pakistan</span></option>
 <option value="UAE">United Arab Emirates</option>
 <option value="CA">Canada</option>
 <option value="GR">Germany</option>
</select>

我是这样设计的:

select option {
    padding-left:30px;

}
select option[value="PK"] {
    height:15px;
    background-image:url(https://d2ijupb52dd0cs.cloudfront.net/assets/flags/pk-43250eed6afece188d65e2d313b825a6.gif);
    background-repeat:no-repeat;
    background-position:5px 2px;
}
select option[value="UAE"] {
    height:15px;
    background-image:url(http://pcache.alexa.com/images/flags/ae.7391e6b6df7b181d51ffeb2a5a6d7bd4.png);
    background-repeat:no-repeat;
    background-position:5px 2px;
}
select option[value="CA"] {
    height:15px;
    background-image:url(http://usefulshortcuts.com/imgs/flags/ca.png);
    background-repeat:no-repeat;
    background-position:5px 2px;
}
select option[value="GR"] {
    height:15px;
    background-image:url(http://www.ardentvigor.com/skin/frontend/default/sm_nik/images/flags/flag-german.jpg);
    background-repeat:no-repeat;
    background-position:5px 2px;
}

查看JSFIDDLE ，现在我希望当我点击任何下拉菜单时，有些像我点击 Canada 而不是在 select 中显示名称，菜单显示我选择的那个国家的国旗.

Answer 1

如果您想要简单易学的代码，请使用此 fiddle 。易于理解。

首先使用 jquery onchange 事件获取选项移动，然后在空 div 中添加带有 .css 属性的 css 以显示标志。很抱歉没有将标志放在选项框中，因为它会有点困难并且需要更多自定义代码，但我让它变得简单所以你也可以理解。

希望您能理解我的观点并自己提出。如果您有任何问题，请告诉我。谢谢

Final Demo