Как изменить несколько раскрывающихся списков выбирает ключ и значения при смене языка, используя jQuery

Question

Я хочу иметь возможность изменить значение нескольких вариантов выбора на основе выбора языка. Мне удалось это долгий путь. Следующий код работает.

HTML

<button ID="lSel" type="button">English</button><br><br>
    <label for="mySel1">Test</label>
    <select name="mySelName" id="mySel1">
        <option value="i0">-Mumble jumble-</option>
        <option value="i1">Arigato1 satu</option>
        <option value="i2">Arigato1 dua</option>
    </select>


    <label for="mySel2">Test</label>
    <select name="mySelName" id="mySel2">
        <option value="i0">-Mumble jumble-</option>
        <option value="i1">Arigato2 satu</option>
        <option value="i2">Arigato2 dua</option>
    </select>

    <label for="mySe3l">Test</label>

Сценарий:

$(function () {
        var sV01_ID1 = {"i00": "-Mumble jumble-","i01": "Arigato1 1","i02": "Arigato1 2"};
        var sV01_EN1 = {"e00": "-Please Choose-","e01": "Choice1 1","e02": "Choice1 2"};
        var sV01_ID2 = {"i00": "-Mumble jumble-","i01": "Arigato2 1","i02": "Arigato2 2"};
        var sV01_EN2 = {"e00": "-Please Choose-","e01": "Choice2 1","e02": "Choice2 2"};
        var e1 = $("#mySel1");
        var e2 = $("#mySel2");

        $('#lSel').click(function () {
            var a = $(this);
            if (a.text() == "English") {
                //change the language button label
                a.text('Alien');
                //first remove current options
                e1[0].options.length = 0;
                e2[0].options.length = 0;
                //now append the value for each
                $.each(sV01_EN1, function (key, value) {e1.append($('<option>', {value: key}).text(value));});
                $.each(sV01_EN2, function (key, value) {e2.append($('<option>', {value: key}).text(value));});
            } else {
                //change the language button label
                a.text('English');
                //first remove current options
                e1[0].options.length = 0;
                e2[0].options.length = 0;
                //now append the value for each
                $.each(sV01_ID1, function (key, value) {e1.append($('<option>', {value: key}).text(value));});
                $.each(sV01_ID2, function (key, value) {e2.append($('<option>', {value: key}).text(value));});
            }
        });
    });

Есть ли способ упростить несколько e1[0].options.length = 0; и $.each(sV01_EN1, function (key, value) {e1.append($('<option>', {value: key}).text(value));});?

Answer 1

Единственное, что изменяется, это присвоенный .text() и первый аргумент, переданный $.each, что вы можете сделать кратко с условным оператором:

var a = $(this);
const eng = a.text() == "English";
//change the language button label
a.text(eng ? 'Alien' : 'English');
//first remove current options
e1[0].options.length = 0;
e2[0].options.length = 0;
//now append the value for each
$.each(eng ? sV01_EN1 : sV01_ID1, function (key, value) {e1.append($('<option>', {value: key}).text(value));});
$.each(eng ? sV01_EN2 : sV01_ID2, function (key, value) {e2.append($('<option>', {value: key}).text(value));});

Было бы более разумно организовать ваш структура данных, так что вы можете использовать поиск свойств Dynami c в скобочных обозначениях вместо нескольких независимых имен переменных, а также использовать вместо этого массив, так что вы можете l oop поверх него и выбирать вместо жесткого их кодирования:

const data = {
  English: [
    {"e00": "-Please Choose-","e01": "Choice1 1","e02": "Choice1 2"},
    {"e00": "-Please Choose-","e01": "Choice2 1","e02": "Choice2 2"}
  ],
  Alien: [
    {"i00": "-Mumble jumble-","i01": "Arigato1 1","i02": "Arigato1 2"},
    {"i00": "-Mumble jumble-","i01": "Arigato2 1","i02": "Arigato2 2"}
  ]
};
const selects = [...$('select[name="mySelName"]')];


$('#lSel').click(function () {
  const a = $(this);
  const newText = a.text() === "English" ? 'Alien' : 'English';
  //change the language button label
  a.text(newText);
  //first remove current options
  for (const select of selects) {
    select.options.length = 0;
  }
  //now append the value for each
  const thisLanguageArr = data[newText];
  selects.forEach((select, i) => {
    for (const [key, value] of Object.entries(thisLanguageArr[i])) {
      $(select).append($('<option>', {value: key}).text(value));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button ID="lSel" type="button">English</button><br><br>
<label for="mySel1">Test</label>
<select name="mySelName" id="mySel1">
  <option value="i0">-Mumble jumble-</option>
  <option value="i1">Arigato1 satu</option>
  <option value="i2">Arigato1 dua</option>
</select>


<label for="mySel2">Test</label>
<select name="mySelName" id="mySel2">
  <option value="i0">-Mumble jumble-</option>
  <option value="i1">Arigato2 satu</option>
  <option value="i2">Arigato2 dua</option>
</select>

<label for="mySe3l">Test</label>