Показать сообщение отдельно
  #1 (permalink)  
Старый 02.05.2020, 20:44
Аспирант
Отправить личное сообщение для Игорь №111111111111111111 Посмотреть профиль Найти все сообщения от Игорь №111111111111111111
 
Регистрация: 19.01.2020
Сообщений: 34

Вывод иконок выбранного поисковика в JS
Как мне сделать чтоб в "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');
  });
});
Ответить с цитированием