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

【问题标题】：Jquery - Use HTML :selected to fetch an array with the same nameJquery - 使用 HTML :selected 获取具有相同名称的数组
【发布时间】：2015-03-03 13:50:11
【问题描述】：

我的 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 中，我有与此选择值同名的数组。数组中填充了不相关的数据。

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 中使用 Albania 数组的，它运行良好。但我也希望其他国家也能这样做。我试过了：

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

当然，这永远不会奏效。

如何将所选输入的文本传输到变量名称？

【问题讨论】：

try this

标签： javascript jquery html arrays variables

【解决方案1】：

如果您将数组的结构更改为an object thus：

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

这很有效，因为您可以access an object's properties by the string of the property name。

所以countriesArra['Albania'] 返回“albania”数组。然后你在这个数组上像往常一样迭代你的 tt 变量，例如countriesArra['Albania'][0] 返回对象的阿尔巴尼亚数组中的第一项。

Brief fiddle

我还加快了您创建选项的速度。所以我使用 jquery var option = $('<option>'); 创建了一个“选项”对象。然后我可以将它的方法和属性作为一个 jquery 对象来访问，而不是用字符串连接它。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

谢谢你的天才:)

【解决方案3】：

您可以使用 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/

【讨论】：