Javascript.RU

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

Вывод иконок выбранного поисковика в 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');
  });
});
Ответить с цитированием
  #2 (permalink)  
Старый 02.05.2020, 20:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,578

Игорь №111111111111111111,
может попытаться не лезть в option с data-атрибутами, а сделать нормальный объект и выборку из него по value селекта.
Ответить с цитированием
  #3 (permalink)  
Старый 02.05.2020, 20:57
Интересующийся
Отправить личное сообщение для Игорь №111111111111111111 Посмотреть профиль Найти все сообщения от Игорь №111111111111111111
 
Регистрация: 19.01.2020
Сообщений: 20

Знать бы еще JS чтоб все что Вы сказали сделать...
Ответить с цитированием
  #4 (permalink)  
Старый 02.05.2020, 21:10
Интересующийся
Отправить личное сообщение для Игорь №111111111111111111 Посмотреть профиль Найти все сообщения от Игорь №111111111111111111
 
Регистрация: 19.01.2020
Сообщений: 20

Вообще не как не получится вывести иконки на том что есть?
Ответить с цитированием
  #5 (permalink)  
Старый 02.05.2020, 23:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,578

Игорь №111111111111111111,
var obj = {Yandex : "css/fonts/Yandex.png", Google : "css/fonts/google.png"};
var value = "Google";
var src = obj[value];
alert(src)
Ответить с цитированием
  #6 (permalink)  
Старый 02.05.2020, 23:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,578

Сообщение от Игорь №111111111111111111
Вообще не как не получится вывести иконки на том что есть?
получится, но это к телепатам, мне сложно понять ваш код.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается вставить код js в HTML garmoni Элементы интерфейса 3 05.09.2013 04:56
Вывод данных в поле ввода с помощью JS Aleks-prog Ваши сайты и скрипты 0 23.06.2011 11:09
Вывод содержания js в html leaderru Общие вопросы Javascript 1 02.02.2011 15:09
Вывод кусков HTML кода с одного файла JS wlad2 Общие вопросы Javascript 16 04.01.2011 10:52
Вывод JS значения в одну строку в HTML velo Общие вопросы Javascript 7 15.12.2009 02:57