Javascript 如何在使用jQuery更改语言时更改多个下拉选择键和值

我希望能够基于语言选择器更改多个选择选项的值。我一直努力做到这一点。下面的代码可以工作

HTML

英语


试验
-含糊不清-
阿里加托萨图
Arigato1 dua
试验
-含糊不清-
佐藤
二重唱
试验

脚本：

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

$（函数（）{
var sV01_ID1={“i00”：“-Mumble-jumble-”，“i01”：“Arigato1”，“i02”：“Arigato1 2”}；
var sV01_EN1={“e00”：“-请选择-”，“e01”：“选择1”，“e02”：“选择2”}；
var sV01_ID2={“i00”：“-Mumble-jumble-”，“i01”：“Arigato2 1”，“i02”：“Arigato2 2”}；
var sV01_EN2={“e00”：“-请选择-”，“e01”：“Choice2 1”，“e02”：“Choice2 2 2”}；
变量e1=$（“#mySel1”）；
变量e2=$（“#mySel2”）；
$（'#lSel'）。单击（函数（）{
var a=$（本）；
如果（a.text（）=“英语”）{
//更改语言按钮标签
a、 文本（“外国人”）；
//首先删除当前选项
e1[0].options.length=0；
e2[0].options.length=0；
//现在为每个附加值
$.each（sV01_EN1，函数（键，值）{e1.append（$（''，{value:key}）.text（值））；}）；
$.each（sV01_EN2，函数（键，值）{e2.append（$（''，{value:key}）.text（值））；}）；
}否则{
//更改语言按钮标签
a、 文本（“英文”）；
//首先删除当前选项
e1[0].options.length=0；
e2[0].options.length=0；
//现在为每个附加值
$.each（sV01_ID1，函数（键，值）{e1.append（$（''，{value:key}）.text（值））；}）；
$.each（sV01_ID2，函数（键，值）{e2.append（$（''，{value:key}）.text（值））；}）；
}
});
});

---

有没有办法简化多个

e1[0].options.length=0

和

$。每个（sV01_EN1，函数（键，值）{e1.append（$（''，{value:key}）.text（值））；}）

？

唯一更改的是分配的

.text（）

和传递给

$的第一个参数。每个
，您可以使用条件运算符简洁地执行以下操作：

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

var a=$（这个）；
const eng=a.text（）=“英语”；
//更改语言按钮标签
a、 文本（英文？‘外国人’：‘英语’）；
//首先删除当前选项
e1[0].options.length=0；
e2[0].options.length=0；
//现在为每个附加值
$.each（eng？sV01_EN1:sV01_ID1，函数（键，值）{e1.append（$（''，{value:key}）.text（值））；}）；
$.each（eng？sV01_EN2:sV01_ID2，函数（键，值）{e2.append（$（''，{value:key}）.text（值））；}）；

更有意义的做法是组织数据结构，这样您就可以使用带括号表示法的动态属性查找，而不是使用多个自变量名称，也可以使用数组，这样您就可以在它和选择上循环，而不是对它们进行硬编码：


const数据={
中文：[
{“e00”：-请选择-”，“e01”：“Choice1 1”，“e02”：“Choice1 2”}，
{“e00”：-请选择-”，“e01”：“Choice2 1”，“e02”：“Choice2 2”}
],
外国人：[
{“i00”：“-Mumble-jumble-”，“i01”：“arigato11”，“i02”：“arigato12”}，
{“i00”：“-Mumble-jumble-”，“i01”：“Arigato2 1”，“i02”：“Arigato2 2”}
]
};
const selects=[…$（'select[name=“mySelName”]'）；
$（'#lSel'）。单击（函数（）{
常数a=$（此值）；
const newText=a.text（）=“英语”？“外国人”：“英语”；
//更改语言按钮标签
a、 文本（新文本）；
//首先删除当前选项
for（const select of selects）{
选择.options.length=0；
}
//现在为每个附加值
const this language arr=数据[newText]；
selects.forEach（（select，i）=>{
for（Object.entries的常量[key，value]（thisLanguageArr[i]））{
$（选择）.append（$（''，{value:key}）.text（value））；
}
});
});

英语


试验
-含糊不清-
阿里加托萨图
Arigato1 dua
试验
-含糊不清-
佐藤
二重唱
测试
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));});