Question

我有几个文本值数组，我想根据用户在另一个数据列表中选择的值，使用其中一个来填充HTML数据列表。我不知道该怎么编码。

这是我的代码，但是还不完整。看到了吗？我可能需要一些其他代码。最好的做法是将地图数组保留在HTML中或将它们放在一个或多个文件（js或文本）中。如果它们应该在文件中，则不确定如何引用它们。

如果我硬编码使用map1或map2而不是mapArray，则此方法有效。

<script>
    var str=''; // variable to store the options
    var mapName = map; //will be text "Map 1" or "Map 2" up to "Map 30"
    var map1 = new Array("Caitlin", "Roadrunner", "More Values");
    var map2 = new Array("Ceedee #1, Ceedee#2"); // up to 30 values
    var mapArray[] = ????? //I want to copy the array for Map 1 or Map 2..
    for (var i=0; i < mapArray.length;++i) {
    str += '<option value="'+mapArray[i]+'" />'; // Storing options in      
    // variable
    }
    var my_list=document.getElementById("theList");
    my_list.innerHTML = str;
    </script>

Answer 1

听起来像spread operator ...的用法

var map1 = new Array("Caitlin", "Roadrunner", "More Values");
var map2 = new Array("Ceedee #1, Ceedee#2");
var mapArray = [...map1, ...map2]; 
// map1 is now ["Caitlin", "Roadrunner", "More Values", "Ceedee #1, Ceedee#2"]

Answer 2

您可以使用push array函数将新元素存储在数组的末尾。

因此，如果您要创建一个数组数组，可以这样做：

var mapArray = new Array();
var map1 = new Array("Caitlin", "Roadrunner", "More Values");
mapArray.push(map1);
var map2 = new Array("Ceedee #1, Ceedee#2");
mapArray.push(map2);

这将导致值mapArray等于[ map1, map2 ]。

由于这是一个2D数组，因此您需要修改for循环。

所以它可能看起来像：

// choice variable is the chosen input from user
for (var i=0; i < mapArray[choice].length; ++i) {
    str += '<option value="'+mapArray[choice][i]+'" />';
}

关于您的其他问题，它们大多基于观点。我建议您使所需的功能正常工作，然后从那里进行扩展，看是否可以使代码更简洁。

Answer 3

无需复制数组，只需将所有可用选项存储在一个对象中，然后按索引访问所需的数组。

此外，您可以填充<select/>元素而无需构建字符串。通过使用Option()，您的代码将更不会出现无法转义的字符问题。

const selectedMap = 'map1';
const maps = {
  'map1': ["Caitlin", "Roadrunner", "More Values"],
  'map2': ["Ceedee #1, Ceedee#2"]
};

let theList = document.getElementById("theList");
theList.options = []; // Empty out all previous options in the <select/> (if any)
maps[selectedMap].forEach((val, index) => {
  theList[index] = new Option(val, val); 
});

<select id='theList'></select>

我有几个文本值数组，我想选择一个数组用作HTML数据列表

3 个答案: