JIucky

Смена языка на сайте при помощи <select>?

Рекомендованные сообщения

Помогите с помощью JS сделать такой функционал, который позволял бы при выборе какого то языка из списка <select> в браузере загружать соответствующий URL с переводом сайта. Значение для URL надо брать из <option value="/en/">. И еще важно, после того как новый URL будет заружен надо чтобы в списке <select> сохранялся выбранный язык, т.е. ему присваивался атрибут selected.

<select>
	<option>Choose language<option>
	<option value="/en/">English<option>
  	<option value="/es/">Español<option>
	<option value="/de/">Deutsch<option>
	<option value="/it/">Italiano<option>
  	<option value="/nl/">Nederlandse<option>
</select>

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Топорный вариант:

<select id="lang">
  <option>Choose language</option>
  <option value="/en/">English</option>
  <option value="/es/">Español</option>
  <option value="/de/">Deutsch</option>
  <option value="/it/">Italiano</option>
  <option value="/nl/">Nederlandse</option>
</select>
 var lang = document.getElementById('lang');
lang.onchange = function(){ 
window.location = 'http://сайт.com' + lang.options[lang.options.selectedIndex].value + 'index.html'}

Ну а чтобы был выбран нужный элемент в списке - на нужной странице присваиваете selected соответствующему пункту в html 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

AlexZaw, это не совсем то что нужно. Смотрите, у мена есть такой урл http://site.com. При выборе языка пользователем из списка, например Deutsch, в браузере должен осуществляться переход на версию сайта с выбранным языком, т.е. урл меняется на http://site.com/de/. И вот уже на этой странице http://site.com/de/ в списке должен быть присвоен атрибут selected выбранному языку Deutsch. В вашем варианте после перехода на http://site.com/de/ в списке сбросится выбранный ранее <option> на первый из списка, т.е. он будет <option>Choose language</option>.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Так я вам и говорю что вариант топорный, но проблему с пунктом селекта можно решить установив selected в html на странице http://site.com/de/  вручную на нужном пункте, и так для каждого языка. По идее можно конечно передавать параметры на открываемую страницу, и на ней в зависимости от переданного параметра выставлять нужный пункт. Но с этим я пока не разбирался

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

можно js проверять при загрузке страницы присутствует ли выбранный язык, если это /de/
найти его в select и выставить ему selected

а вообще это лучше делать на уровне сервера при формировании пунктов select

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
В 09.07.2018 в 13:46, Switch74 сказал:

а вообще это лучше делать на уровне сервера при формировании пунктов select

Это как? Покажите пример пожалуйста.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
$url = preg_split('/\?/',$_SERVER['REQUEST_URI']);
$url = preg_split('/\//',$url[0]);
$lng = array('de'=>'','en'=>'','ru'=>'');
if(!empty($url[1])) $lng[$url[1]] = ' selected';
echo '<select>';
foreach($lng as $key=>$val)
{
echo '<option value="'.$key.'"'.$val.'>'.$key.'</option>';
}
echo '</select>';

как-нить так

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Похожие публикации

    • Автор: Miss_Cherie
      Здравствуйте!
      Возникает проблема при работе с select'ом. Стиль select изменен с помощью скриптов.
      При генерации кода получается следующее:


      <select class="selectBox" name="PERSONAL_GENDER" style="display: none;">
      <option value="">(неизвестно)</option>
      <option selected="SELECTED" value="M">Мужской</option>
      <option value="F">Женский</option>
      </select>
      <a class="selectBox selectBox-dropdown" style="width: 469px; display: inline-block; -moz-user-select: none;" title="" tabindex="0">
      <span class="selectBox-label" style="width: 425px;">Мужской</span>
      <span class="selectBox-arrow"></span>
      </a>

      —КОД ВЫПАДАЮЩЕГО СПИСКА—
      <ul class="selectBox-dropdown-menu selectBox-options" style="-moz-user-select: none; width: 469px; top: 1145px; left: 424.8px; display: block;">
      <li class="">
      <a rel="">(неизвестно)</a>
      </li>
      <li class="selectBox-selected">
      <a rel="M">Мужской</a>
      </li>
      <li class="">
      <a rel="F">Женский</a>
      </li>
      </ul>


      Но на сайте есть моменты, когда в зависимости от выбранного пункта выполняется подгрузка определенного контента (и перезагрузка страницы). И после перезагрузки select теряет все свои стили (то есть js не подгружается) и это в коде выглядит так:


      <select id="COUNTRYORDER_PROP_5" type="location" onchange="SetContact(this.value)" name="COUNTRYORDER_PROP_5">

      <option>(выберите страну)</option>

      <option selected="selected" value="1">Азербайджан</option>

      <option value="12">Армения</option>

      <option value="2">Беларусь</option>
      </select>


      Я думаю, что проблема в атрибуте onchange="...", который добавляется у select'a . Но никак не могу исправить.
      Помогите, пожалуйста!
      Как сделать, чтобы функция подгрузки стилей у селекта всегда вызывалась?