Jquery-使用HTML:selected来获取具有相同名称的数组

Jquery - Use HTML :selected to fetch an array with the same name

本文关键字：数组 HTML 使用 selected 获取 Jquery-      更新时间：2023-09-26

我在HTML 中有这个选择输入

                <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>

在Jquery中，我有和这个select值同名的数组。数组中填充了不相关的数据。

var Albania = [];
var Croatia = [];
var Bulgaria= [];
...

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

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

注意我是如何在Jquery中使用阿尔巴尼亚数组的，这很好。但我也希望其他国家也这样做。我试过了：

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

这是因为您可以通过属性名称的字符串访问对象的属性。

因此countriesArra['Albania']返回"albania"数组。然后在这个数组上正常地迭代tt变量，例如countriesArra['Albania'][0]返回对象的albania数组中的第一个项。

简短的小提琴

我还整理了你的期权创建。因此，我使用jquery var option = $('<option>');创建了一个"选项"对象。然后，我可以作为jquery对象访问它的方法和属性，而不是字符串连接它

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

在不修改数组结构的情况下，您可以尝试eval指令。它可以为您的目的执行一些"变量名称作为变量"的行为。更准确地说，eval函数求值表达式和/或指令可能包含变量，例如，您可以定义两个变量var a = 1 var b = 2并运行eval("a+b")，结果为3。

JS-

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

您可以使用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);
});

http://jsfiddle.net/rerich/1ze1og8L/

相关文章：