У меня есть несколько массивов текстовых значений, и я хочу выбрать один из массивов для использования в качестве источника данных HTML

#javascript #arrays #copy #datalist

#javascript #массивы #Копировать #datalist

Вопрос:

У меня есть несколько массивов текстовых значений, и я хочу использовать один из них для заполнения списка данных HTML на основе выбора пользователем значения в другом списке данных. Я не знаю, как это закодировать.

Вот мой код, но он не завершен. Видишь ???? и мне может понадобиться какой-то дополнительный код. Было бы лучше всего сохранить массивы карт в HTML или поместить их в один или несколько файлов (js или text). Если они должны быть в файлах, я не уверен, как ссылаться на них.

Это работает, если я жестко закодирую использование 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>

Ответ №1:

Звучит как использование оператора распространения ...

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

Ответ №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 ] .

Вам нужно будет изменить свой for цикл, потому что это 2D-массив.

Так что это может выглядеть примерно так:

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

Что касается других ваших вопросов, то они в основном основаны на мнениях. Я рекомендую вам заставить желаемую функциональность работать, а затем расширить ее, чтобы посмотреть, сможете ли вы сделать код чище.

1. Извините, если я не совсем ясно выразился. Я хочу заполнить список данных значениями map1 только в том случае, если пользователь выбрал Карту 1 из предыдущего выбора списка данных в форме. Если пользователь выбрал Карту 2, то я хочу заполнить список данных только значениями map2. mapArray должен содержать только значения Caitlin, Roadrunner и другие или он должен содержать только Ceedee # 1 и Ceedee # 2.

Ответ №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>