CODEWITHSUNDEEP
javascriptjquery
garagnoth
garagnoth

Reputation: 234

How to change multiple dropdown selects key and values upon changing language using jQuery

i want to be able to change the value of multiple selects options based on language selector. I managed to this the long way. The following code works.

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>

Script:

$(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));});
            }
        });
    });

Is there a way to simplify multiple e1[0].options.length = 0; and $.each(sV01_EN1, function (key, value) {e1.append($('<option>', {value: key}).text(value));});?

Upvotes: 0

Views: 926

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 371049

The only thing that changes is the assigned .text() and first argument passed to $.each, which you can do concisely with the conditional operator:

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));});

It would make more sense to organize your data structure so that you can use dynamic property lookup with bracket notation instead of having multiple independent variable names, and also use an array instead, so you can loop over it and the selects instead of hard-coding them:

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>

Upvotes: 1

Related Questions