Изменения значения select

106

06 января 2021, 23:50

Есть форма, в ней сотрудник вводит данные, в конце нажимает на кнопку и создается .htm файл.

Данные сотрудник может вводить на 2 языках, язык выбирает сам.

<label for="lang">Выберите язык:</label><br>
<select name="lang" id="lang">
    <option value="Ru">Русский</option>         
    <option value="Eng">Английский</option>                         
</select>

По окончанию ввода данных, все введенное передается на другую форму

<form id="VeryAction" action="action.php" method="post">

И все вроде бы работает, но есть нюанс. В форме есть select с городами

<label for="town">Город:</label><br>
<select name="town" id="town">
    <option value="1">Мурманск</option>
    <option value="2">Москва</option>
    <option value="3">Санкт-Петербург</option>
    <option value="4">Сочи</option>
</select>

Если русский язык, города по русски, если английский то по английски. Так же в зависимости от языка изменятся ссылка в action.

<div class="allbutton">
<button id="CreatePod" class="CreatePod" type="submit">Создать</button>

     <script>
         var select, value, langv, langs;
         document.getElementById('CreatePod').onclick = function() {
             select = document.getElementById("town");
             value = select.options[select.selectedIndex].value;
             langs = document.getElementById("lang");
             langv = langs.options[langs.selectedIndex].value;
             alert(langv);
             if ( langv === 'Eng') {
                 if (value === "1") {select.options[select.selectedIndex].value = ""}
                 if (value === "2") {select.options[select.selectedIndex].value = ",  Moscow"}
                 if (value === "3") {select.options[select.selectedIndex].value = ",  St. Petersburg"}
                 if (value === "4") {select.options[select.selectedIndex].value = ",  Sochi"}
                 $('#VeryAction').attr('action', 'actionEng.php');
             }
             if ( langv === 'Ru') {
                 if (value === "1") {select.options[select.selectedIndex].value = ""}
                 if (value === "2") {select.options[select.selectedIndex].value = ",  Москва"}
                 if (value === "3") {select.options[select.selectedIndex].value = ",  Санкт-Петербург"}
                 if (value === "4") {select.options[select.selectedIndex].value = ",  Сочи"}
                 $('#VeryAction').attr('action', 'action.php');
             }
         }
     </script>

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

Answer 1

Эмм... можно использовать массивы, и не заморачиваясь, сразу переключать всё:

JsFiddle

(function(){ 
 
var rutown = ['Мурманск', 'Москва', 'Санкт-Петербург', 'Сочи']; 
var entown = ['Murmansk', 'Moscow', 'St. Peterburg', 'Sochi']; 
var list = document.getElementById('town').getElementsByTagName('option'); 
 
document.getElementById('lang').addEventListener('input', function(){ 
  var x = rutown; 
  if( this.value == 'Ru' ) {  
    x = rutown;  
    //$('#VeryAction').attr('action', 'actionEng.php'); 
  } else if( this.value == 'Eng' ) { 
    x = entown; 
    //$('#VeryAction').attr('action', 'action.php'); 
  } 
  /* каждому элементу массива соответствует свой элемент option */ 
  var i; 
  for( i = 0; i < list.length; i++ ){ 
      list[i].innerText = x[i]; 
  } 
}); 
 
})();

<label for="lang">Выберите язык:</label><br> 
<select name="lang" id="lang"> 
    <option value="Ru">Русский</option>          
    <option value="Eng">English</option>                          
</select>  
 
<br><br> 
 
<label for="town">Город:</label><br> 
<select name="town" id="town"> 
    <option value="1">Мурманск</option> 
    <option value="2">Москва</option> 
    <option value="3">Санкт-Петербург</option> 
    <option value="4">Сочи</option> 
</select>

P.s. Switch - Case

Answer 2

Можно создать шаблон и из него при смене языка выбирать данные по принципу ключ => значение и менять подписи у полей ввода, а также атрибут action формы.

// Задаем локали по принципу `i18n`. 
const LOCALES = { 
  "Eng": { 
    "action": "actionEng.php", 
    "town": { 
      "1": "Murmansk", 
      "2": "Moscow", 
      "3": "St. Petersburg", 
      "4": "Sochi" 
    } 
  }, 
  "Ru": { 
    "action": "action.php", 
    "town": { 
      "1": "Мурманск", 
      "2": "Москва", 
      "3": "Санкт-Петербург", 
      "4": "Сочи" 
    } 
  } 
} 
 
// Выбираем элементы с которыми будем работать. 
const MAINFORM = document.getElementById('feedback_form'); 
const LANG_BOX = MAINFORM.elements.lang; 
const TOWN_BOX = MAINFORM.elements.town; 
 
// Добавлем функцию-обработчик, которая будет выполняться 
// при выборе языка в выпадающем списке. 
LANG_BOX.addEventListener('input', changeLocale); 
 
// Функция изменения атрибута `action` у формы и 
// языка городов в выпадающем списке. 
function changeLocale(event) { 
  // Текущий выбранный язык. 
  const lang = LANG_BOX.value; 
 
  // Меняем action формы. 
  MAINFORM.action = LOCALES[lang].action; 
 
  // Перебираем все `option` выпадающего списка города. 
  [...TOWN_BOX.options].forEach(function(option) { 
    // Ставим соответствующий для города текст. 
    option.text = LOCALES[lang].town[option.value]; 
  }); 
}

label { 
  display: block; 
  margin-top: 15px; 
}

<form id="feedback_form" action="action.php" method="post"> 
  <label for="lang">Выберите язык:</label> 
  <select id="lang" name="lang"> 
    <option value="Ru" selected>Русский</option> 
    <option value="Eng">Английский</option> 
  </select> 
 
  <label for="town">Город:</label> 
  <select id="town" name="town"> 
    <option value="1" selected>Мурманск</option> 
    <option value="2">Москва</option> 
    <option value="3">Санкт-Петербург</option> 
    <option value="4">Сочи</option> 
  </select> 
 
  <hr> 
  <button type="submit">Создать</button> 
</form>