基于单独下拉列表中选定索引的 Javascript 循环

Question

您好，我有一个如下所示的选择列表:-

<select id="countryData">   
    <option>England</option>           
    <option>France</option>          
    <option>Germany</option>         
</select>

我还声明了一个变量，其中包含列表中每个国家/地区的数据，例如:-

var England = {};
England['Spain'] = 45;
England['Denmark'] = 50;

我需要一种方法，以便根据在下拉框中选择的内容显示国家/地区列表和该国家/地区的值。例如在下拉列表中选择了英格兰:-

ENGLAND

Spain   45
Denmark 50

不幸的是，我的 javascript 技能很糟糕，到目前为止，我一直在使用以下方法从下拉列表中获取选定的值:-

$("#countryData option:selected").text()

然而，例如，字面上用“England”填充，作为一个字符串，所以我不确定如何在我的 for 循环中引用数组“England”，它是这样的:-

for (var name in $("#countryData option:selected").text()) {
            document.write($("#countryData option:selected").text()[name]);
    }

我可能只是走错了路，如果有人能给我指出正确的方向，那就太好了!

非常感谢!

Answer 1

你不应该在页面加载后使用document.write()，它会覆盖页面的内容。使用 jQuery 的方法将元素附加到 DOM。

.text() 返回一个字符串，而不是一个对象，因此您不能对它使用 for-in。

如果您想使用下拉列表中的国家/地区作为查找内容的键，您需要将其作为对象中的属性名称:

var countries = {
    England: {
        Spain: 45,
        Denmark: 50
    }
    France: {
        Spain: 30,
        Portugal: 40
    }
    ...
}

那么你可以做如下操作:

var country = $("#countryData option:selected").text());
$.each(countries[country], function(name, value) {
    $("#resultList").append("<li>" + name + " " + value + "</li>");
});