Как мне сделать чтоб в "selectBox" отображались иконки выбранного поисковика?
По идеи нужно мудрить с
if (i == select.attr('selectedIndex')) {
selectBox.html(option.text());
}
но как я не старался он показывает только путь к иконке (Текстом)
<select class="makeMeFancy" id="KSWeb">
<option data-icon="css/fonts/Yandex.png" data-html-text="Yandex" value="Yandex">Yandex</option>
<option data-icon="css/fonts/google.png" data-html-text="Google" value="Google">Google</option>
<option data-icon="css/fonts/Wikipedia.png" data-html-text="Wikipedia" value="Wikipedia">Wikipedia</option>
<option data-icon="css/fonts/youtube.png" data-html-text="Youtube" value="youtube">Youtube</option>
<option data-icon="css/fonts/Bing.png" data-html-text="Bing" value="Bing">Bing</option>
<option data-icon="css/fonts/DC.png" data-html-text="DuckDuckGo" value="duckduckgo">DuckDuckGo</option>
</select>
$(document).ready(function() {
var select = $('select.makeMeFancy');
var selectBoxContainer = $('<div>', {
width: select.outerWidth(),
className: 'tzSelect',
html: '<div class="selectBox"></div>'
});
var dropDown = $('<ul>', {
className: 'dropDown'
});
var selectBox = selectBoxContainer.find('.selectBox');
select.find('option').each(function(i) {
var option = $(this);
if (i == select.attr('selectedIndex')) {
selectBox.html(option.text());
}
var li = $('<li>', {
html: '<img src="' + option.data('icon') + '" /><span>' +
option.data('html-text') + '</span>'
});
li.click(function() {
selectBox.html(option.text());
dropDown.trigger('hide');
select.val(option.val());
return false;
});
dropDown.append(li);
});
selectBoxContainer.append(dropDown.hide());
select.hide().after(selectBoxContainer);
dropDown.bind('show', function() {
selectBox.addClass('expanded');
dropDown.slideDown();
}).bind('hide', function() {
selectBox.removeClass('expanded');
dropDown.slideUp();
}).bind('toggle', function() {
if (selectBox.hasClass('expanded')) {
} else dropDown.trigger('show');
});
selectBox.click(function() {
dropDown.trigger('toggle');
return false;
});
$(document).click(function() {
dropDown.trigger('hide');
});
});