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

如果你想要简单易学的代码，那么请使用这个小提琴。易于理解。

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

希望你能得到我自己的观点。如果您有任何疑问，请告诉我。感谢名单

Final Demo

Answer 2

请查看以下链接。你的意思是一样的。

http://jsfiddle.net/roberkules/TxAhb/

    (function ($) {
    // size = flag size + spacing
    var default_size = {
        w: 20,
        h: 15
    };

    function calcPos(letter, size) {
        return -(letter.toLowerCase().charCodeAt(0) - 97) * size;
    }

    $.fn.setFlagPosition = function (iso, size) {
        size || (size = default_size);

        var x = calcPos(iso[1], size.w),
            y = calcPos(iso[0], size.h);

        return $(this).css('background-position', [x, 'px ', y, 'px'].join(''));
    };
})(jQuery);

// USAGE:

(function ($) {

    $(function () {
        var $target = $('.country');

        // on load:
        $target.find('i').setFlagPosition('es');

        $('select').change(function () {
            $target.find('i').setFlagPosition(this.value);
            $target.find('b').text($(this).find(':selected').text());
        });
    });

})(jQuery);

Answer 3

你可以用简单的方法 -

<script type="text/javascript">
    $(document).ready(function(){
        $('#country').change(function(){
            var country = $('#country').val(); //get  country val
            var flag = $('option[value=' + country + ']').css('background-image'); // get url('link')
            var url = flag.replace(/^url\(["']?/, '').replace(/["']?\)$/, ''); // it replace url , ( and get only img link
            $('div.flat-img').html('<img src="' + url + '">'); // it will add html with flag
        });
    });
</script>

HTML下拉功能

3 个答案: