javascript - 自定义选择框 - 选择选项时占位符中的数据图标未正确更新

Question

在这个自定义选择框中，我试图显示一个选项列表，其中一个选择显示其相应的数据图标，而不是在占位符中显示其文本。

但是当单击其中一个选定的选项时，占位符中的数据图标未正确更新。无论选择什么，它只显示第一个数据图标。

http://jsfiddle.net/Zg76F/3/

on line 7 - declaration
dataui = $(this).children('option')

on line 24 - show data-icon for option:selected on first run
$styledSelect.html('<img src="'+dataui.data('icon')+'" />');

on line 61 - update selection when option is clicked
$styledSelect.html('<img src="'+dataui.data('icon')+'" />').removeClass('active'); 

我猜概率在声明中，但不确定如何迭代并指向特定选择。
和
我无法在第 24 行中使用 option:selected 以在首次运行时显示数据图标。

并且，当显示选项列表以指示已选择/已选择的内容时，我将如何添加刻度线

Answer 1

你需要像这样用 $this.find(":selected").data('icon') 设置 $styledSelect.html

$('select').each(function() {
    var $this = $(this),
    dataui = $this.children('option'),
    numberOfOptions = dataui.length;
    $this.addClass('s-hidden');
    $this.wrap('<div class="select"></div>');
    $this.after('<div class="styledSelect"></div>');
    var $styledSelect = $this.next('div.styledSelect');
    //$this.find(":selected").data('icon') the actual icon
    $styledSelect.html('<img src="'+$this.find(":selected").data('icon')+'" />');
    var $list = $('<ul />', {
        'class': 'options'
    }).insertAfter($styledSelect);
    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }
    var $listItems = $list.children('li');
    $styledSelect.mouseover(function(e) {
        e.stopPropagation();
        $('div.styledSelect.active').each(function() {
            $(this).removeClass('active').next('ul.options').hide();
        });
    $(this).toggleClass('active').next('ul.options').toggle();
    });
$listItems.click(function(e) {
    e.stopPropagation();
    //select the option
    $this.val($(this).attr('rel'));
    //set the icon
    $styledSelect.html('<img src="'+$this.find(":selected").data('icon')+'" />').removeClass('active'); 
    $list.hide();   
 });
$('.select').mouseleave(function() {
    $styledSelect.removeClass('active');
    $list.hide();
});

});    

http://jsfiddle.net/Zg76F/4/