Как изменить контент при выборе языка?

Question

[Sama Samsonov]

<select name='lang'>
					<option value='en'>English</option>
					<option value='fr'>French</option>
					<option value='sp'>Spanish</option>
				</select>
			</div>

			<div id="fr" class="page">
				Content of page 1
			</div>
			<div id="en" class="page">
				Content of page 2
			</div>
			<div id="sp" class="page">
				Content of page 3
			</div>

Answer 1

[Ilya Bobkov]

$("select").on('change', function () {
     switch($("select option:selected").val())
     {
         case "en": $("#fr").html("content en");  break;
         case "fr": $("#en").html("content fr");  break;
         case "sp": $("#sp").html("content sp");  break;
     }
});

Comments

[Sama Samsonov]

не работаеть

[Ilya Bobkov]

Sama Samsonov, Работает: https://jsfiddle.net/2eo398zo/#&togetherjs=4v9IsKDybQ

[Никита Кит]

PsychoCoder, всё равно плохая идея копировать трижды всю разметку страницы.

Answer 2

[Никита Кит]

1) Нужно погеморроиться на backend - весь существующий контент страниц нужно дублировать и и перевести на другие языки
2) Добавляем ajax на сервер, в который отсылаем простой сериалайз (lang=select.val() ). На сервере принимаем lang и формируем новый контент страницы на той же разметке но с новым контентом. Ловим его в success: function(data){...} Старый контент fadeOut, remove, новый - fadeIn

Answer 3

[vaskadogana]

Если без бекэнда, то делаешь json

var lang = {
en: {
word:  "word"
},
ru: {
word: "слово"
}
fr: {
word: "la word"
}
var choosed = 'ru';
//по клику меняешь значение
$("select").on('change', function () {
   choosed = $("select option:selected").val();
}

//функция возвращает слово
  function ChoosedLanguge(lang,choosed, word ){
       return lang[choosed][word]
}
// контент будет выглядеть так

  <div id="fr" class="page">
       ChoosedLanguge(lang,choosed, word )
    </div>
      <div id="en" class="page">
           ChoosedLanguge(lang,choosed, word )
      </div>
      <div id="sp" class="page">
           ChoosedLanguge(lang,choosed, word )
      </div>

Comments

[vaskadogana]

эммм ну идея такая, только без реакта нужно будет листенеры вешать и делать innerHtml, оббегать все элементы