Вёрстка переключателя языков?

Question

Я сделал такой переключатель языков сейчас:

$(document).ready(function () {
  var lang = document.getElementById("lang");
  lang.onchange = function () {
    window.location =
      "https://studyintomsk.ru" +
      lang.options[lang.options.selectedIndex].value;
  };
});

<select name="lang" id="lang">
  <option value="/">Русский</option>
  <option class="eng" value="/en/main">English</option>
</select>

Код работает правильно, но есть одна проблема: в option нельзя добавлять картинки языков сбоку. А мне это нужно. Как сверстать по-другому(с картинкой), но чтобы работало по такому же принципу(перекидывало на нужную страницу при выборе), а на выбранной странице должен отображаться выбранный язык.

Answer 1

Есть вот такое решение https://designwithpc.com/Plugins/ddSlick для подобных задач,детализировано не вдавался как работает это штука,но по крайне мере уже она написана.

Answer 2

Вы можете использовать HTML Symbols, или любые другие сторонние библиотеки иконок для того что бы добавить простую графику рядом и/или вместо текста:

<select>
  <option>&#174; Copyrighted</option>
  <option>&reg; Registered</option>
</select>

БЛОГ НА HUSL

Вёрстка переключателя языков?

Ответы (2 шт):