Javascript Jquery-使用HTML：选中以获取具有相同名称的数组

我的HTML中有这个select输入

                <select class="" id="countries" name="Country">
                    <option value="AL">
                        Albania
                    </option>
                    <option value="HR">
                        Croatia
                    </option>
                    <option value="BG">
                        Bulgaria
                    </option>
                    <option value="MK">
                        Macedonia
                    </option>
                    <option value="MT">
                        Malta
                    </option>
                    <option value="MD">
                        Moldova
                    </option>
                    <option value="RO">
                        Romania
                    </option>
                    <option value="RS">
                        Serbia
                    </option>
                    <option value="SI">
                        Slovenia
                    </option>
                </select>

根据选择的国家/地区，另一个select输入应填充具有相同国家/地区名称的数组。另一个选择是cepsp

当然，这是行不通的

---

如何将所选输入的文本转换为变量名？

如果将数组的结构更改为：

现在，您可以根据阵列名称选择正确的阵列：

$( "#countries").change(function() {
  // get name that macthes array name, i.e. the text not the value
  var countryName = $(this).text();
 //countryName should be "Albania" not "AL"
  $('#cepsp').empty();
  var option = $('<option>');
   for (var tt=0;tt<countriesArra[countryName].length;tt++)
  {
     //variable prevents querying the array twice, so this should be more efficent
     var countryNameFromArra = countriesArra[countryName][tt];
     option.val(countryNameFromArra).html(countryNameFromArra);
   }
   $('#cepsp').append(option);
});

---

在不修改数组结构的情况下，您可以尝试使用eval指令，也可以使用变量名作为变量行为。更准确地说，eval函数求值表达式和/或指令可能包含变量，例如，您可以定义两个变量var a=1 var b=2，然后运行evala+b，结果为3

JS

您可以使用eval从字符串中创建变量

var Albania = ["a","b","c"];
var Croatia = ["d","e","f"];
var Bulgaria= ["g","h","j"];


$( "#countries").change(function() {
    var countryName = $(this).find(":selected").text();
    $('#cepsp').empty();
    var country = eval(countryName);
    var option = '';
    for (var tt=0; tt < country.length; tt++)
    {option += '<option value="'+country[tt]+'">'+country[tt]+'</option>';}
    $('#cepsp').append(option);
});

---

谢谢你是天才：

$( "#cepsp option:selected" ).text()[tt]

var countriesArra ={
   Albania:[],
   Croatia:[],
   Bulgaria:[],
   ....
}

$( "#countries").change(function() {
  // get name that macthes array name, i.e. the text not the value
  var countryName = $(this).text();
 //countryName should be "Albania" not "AL"
  $('#cepsp').empty();
  var option = $('<option>');
   for (var tt=0;tt<countriesArra[countryName].length;tt++)
  {
     //variable prevents querying the array twice, so this should be more efficent
     var countryNameFromArra = countriesArra[countryName][tt];
     option.val(countryNameFromArra).html(countryNameFromArra);
   }
   $('#cepsp').append(option);
});

option.val(countriesArra[countryName][tt]).html(countriesArra[countryName][tt]);

var Albania = ["ALBANIA", "ALBANIA2"];
var Croatia = ["CROATIA", "CROATIE2"];
var Bulgaria= ["BULGARIA", "BULGARIA2"];

$( "#countries").change(function() 
{
  $('#cepsp').empty();
  var option = '';
  var name = $("#countries option:selected").text();
  for (var tt=0;tt<eval(name).length;tt++)
  {
    option += '<option value="'+eval(name)[tt]+'">'+eval(name)[tt]+'</option>';
  }
  $('#cepsp').append(option);
});

var Albania = ["a","b","c"];
var Croatia = ["d","e","f"];
var Bulgaria= ["g","h","j"];


$( "#countries").change(function() {
    var countryName = $(this).find(":selected").text();
    $('#cepsp').empty();
    var country = eval(countryName);
    var option = '';
    for (var tt=0; tt < country.length; tt++)
    {option += '<option value="'+country[tt]+'">'+country[tt]+'</option>';}
    $('#cepsp').append(option);
});