Как применить javascript к нескольким идентификаторам?

Question

У меня есть два выпадающих меню с идентификатором validKeys1 и validKeys2. Я пытаюсь заполнить выпадающие списки из массива, используя приведенный ниже код javascript, но он заполнит только validKeys2. Как использовать один и тот же фрагмент javascript для нескольких идентификаторов?

var validKeys1 = document.getElementById("validKeys1"); 
var validKeys2 = document.getElementById("validKeys2"); 

for(var i = 0; i < validCoursesKeys.length; i++) { 
    var opt = validCoursesKeys[i]; 
    var el = document.createElement("option"); 
    el.textContent = opt; 
    el.value = opt; 
    validKeys1.appendChild(el); 
    validKeys2.appendChild(el); 
} 

Answer 1

Вы можете использовать общий class вместо и cloneNode дублировать узел el каждый раз, когда вы добавляете его:

var validKeys = document.getElementsByClassName("validKeys"); 

for(var i = 0; i < validCoursesKeys.length; i++) { 
    var opt = validCoursesKeys[i]; 
    var el = document.createElement("option"); 
    el.textContent = opt; 
    el.value = opt; 

    for(var j = 0; j < validKeys.length; j++) { 
     validKeys[j].appendChild(el.cloneNode(true)); 
    } 
} 

Надеется, что это помогает.

var validCoursesKeys = ['opt 1','opt 2','opt 3','opt 4'] 
 
var validKeys = document.getElementsByClassName("validKeys"); 
 

 
for(var i = 0; i < validCoursesKeys.length; i++) { 
 
    var opt = validCoursesKeys[i]; 
 
    var el = document.createElement("option"); 
 
    
 
    el.textContent = opt; 
 
    el.value = opt; 
 

 
    for(var j = 0; j < validKeys.length; j++) { 
 
    validKeys[j].appendChild(el.cloneNode(true)); 
 
    } 
 
}

<select class="validKeys"></select> 
 
<select class="validKeys"></select> 
 
<select class="validKeys"></select>

Answer 2

Ваш код фактически Добавляя опции элемента в validKeys1, а затем изменить его родителя validKeys2. Это должно работать так, как вы ожидали.

var validKeys1 = document.getElementById("validKeys1"); 
var validKeys2 = document.getElementById("validKeys2"); 

for(var i = 0; i < validCoursesKeys.length; i++) { 
    var opt = validCoursesKeys[i]; 
    var el = document.createElement("option"); 
    el.textContent = opt; 
    el.value = opt; 
    validKeys1.appendChild(el); 
    var el2 = el.cloneNode(false); 
    validKeys2.appendChild(el2); 
} 

Answer 3

appendChild() принимает элемент, который передается и движется его в родительский элемент. Значение, если оно уже внутри одного элемента, оно удаляется оттуда и помещается в другое.

Вы можете сделать целый новый элемент или использовать cloneNode(), чтобы добавить в ваш второй выбор

validKeys1.appendChild(el); 
validKeys2.appendChild(el.cloneNode(true)); 

Answer 4

это может быть также полезно, используя метод Foreach на массиве

var validKeys1 = document.getElementById("validKeys1"); 
var validKeys2 = document.getElementById("validKeys2"); 
[validKeys1, validKeys2].forEach((ids) => { 
    validCoursesKeys.forEach((courses) => { 
     var opt = courses 
     var el = document.createElement('option'); 
     el.textConent = opt; 
     el.value = opt; 
     ids.appendChild(el) 
    }) 
})