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

Question

[Роман Тузов]

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

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

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

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

Comments

[Дмитрий]

Для этого необходимо использовать кастомный select.

[Роман Тузов]

Дмитрий, использовал уже один, но он отображает не совсем правильно. Если честно, даже не знаю почему, ведь другие отображает нормально

Answer 1

[Арсений Матыцин]

То, что делает приведенный код — через сложности выполняет роль обычной ссылки. Поэтому просто заверни это в ссылку и их в выпадашку. Как работает и выглядит выпадашка → гугли dropdown.

Comments

[Роман Тузов]

Я понимаю, но мне нужно чтобы подставлялось выбранное значение при выборе нужного языка

[Арсений Матыцин]

Роман Тузов, не вижу никакого противоречия.

[Роман Тузов]

Арсений Матыцин, Так как тогда сделать? Тут нужен будет js, но я не знаю как так сделать. не поделитесь какой-нибудь полезной ссылкой?

Answer 2

[Froggyweb]

в данном варианте custom select например select2 или мне нравится formstyler оба требуют jQuery, наверняка уже и нативные варианты появились.

вообще вариантов много, все зависит от дизайна.
твой скрипт прикольный, но бесполезный, после перезагрузки страницы все сбросится.

Comments

[Роман Тузов]

А почему бы ему не сброситься?) Ведь пользователь уже находится на нужной странице, хоть сколько перезагружай, ты останешься там, где ты должен быть

[Роман Тузов]

дизайн

[Froggyweb]

Роман Тузов, если сайт одностраничный, то еще как-то. и то я иногда перезагружаю страницу.
по дизайну ну если во многих местах используются кастомные селекты используй плагин, если нет- лучше написать свой костыль на js

[Роман Тузов]

Froggyweb, Я уже использую formstyler, но как мне всё-таки задать картинки слева от слова

[Froggyweb]

вот получше решение чем твое https://ru.stackoverflow.com/questions/496396/%D0%...

[Froggyweb]

Роман Тузов, на этой странице последний пример, только значение по умолчанию настроить dimox.github.io/jQueryFormStyler/demo/#select

[Роман Тузов]

Froggyweb, я вижу выбор, но не вижу, чтобы меня перебрасывало на нужную страницу, как у меня задано в value

[Froggyweb]

Роман Тузов, это задача бэка

[Роман Тузов]

Froggyweb, Увидел пример, но не увидел как его сделали)

[Froggyweb]

Роман Тузов,

<div class="sec lang">
					<p>Класс, указаннный для <code>option</code>, передается свернутом селекту, благодаря чему мы в нем видим флаг.</p>
					<select>
						<option>-- Выберите язык --</option>
						<option class="lang-en">Английский</option>
						<option class="lang-es">Испанский</option>
						<option class="lang-de">Немецкий</option>
						<option class="lang-ru">Русский</option>
						<option class="lang-fr">Французский</option>
					</select>
				</div><!-- .sec -->

картинки добавляются через css как backgraund
только вместо обертки div лучше сделать

ну и у option добавить value="ru" и т.д

Answer 3

[Александр Миранович]

$(document).ready(function(){
  $('.language .head').click(function() {
    $(this).closest('.language').find('ul').stop().slideToggle();
  });
});

<div class="language">
  <span class="head">Ru</span>
  <ul>
    <li><a href="http://exemple.com/">Ru</a></li>
    <li><a href="http://exemple.com/en/">En</a></li>
  </ul>
</div>

.language {
    display: inline-block;
    position: relative;
}
    content: '';
    width: 0;
    height: 0;
    border: 5px solid transparent;
        border-top-color: transparent;
        border-top-style: solid;
        border-top-width: 5px;
        border-bottom-color: transparent;
        border-bottom-style: solid;
        border-bottom-width: 5px;
    border-bottom: none;
    border-top: 5px solid #FFF;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}
.language .head {
    padding: 5px 25px 5px 15px;
    color: #FFF;
    background: #000;
}
.language ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #000;
}
.language ul li a {
    display: block;
    color: #FFF;
    padding: 5px 15px;
}

Comments

[Froggyweb]

Это решение скажет серверу установить язык русский к примеру? нафиг такие решения.
вообще переключатель языков это форма в смысле тег form, как и search, как и фильтр и пр...

[Александр Миранович]

Froggyweb, Вы понимаете о чем говорите? Тут показан просто пример. Выше человек советует установить доп плагин, только для переключения языка.