Вывод иконок выбранного поисковика в JS
 

Как мне сделать чтоб в "selectBox" отображались иконки выбранного поисковика?
По идеи нужно мудрить с

if (i == select.attr('selectedIndex')) {
selectBox.html(option.text());
    }

но как я не старался он показывает только путь к иконке (Текстом):-/ :help:

<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');
  });
});

Игорь №111111111111111111,
может попытаться не лезть в option с data-атрибутами, а сделать нормальный объект и выборку из него по value селекта.

Знать бы еще JS чтоб все что Вы сказали сделать...

Вообще не как не получится вывести иконки на том что есть?

Игорь №111111111111111111,

var obj = {Yandex : "css/fonts/Yandex.png", Google : "css/fonts/google.png"};
var value = "Google";
var src = obj[value];
alert(src)

получится, но это к телепатам, мне сложно понять ваш код.