将相同的元素附加到两个下拉列表会导致仅附加最后一个
Appending same element to two dropdowns results in only the last being appended
我有以下代码;
function SetupDropdowns() {
var PrevType;
dropdown1 = document.getElementById("ddl1");
******************
for (var i = 0; i < Cars.length; i++) {
var myItem = Items[i];
if (PrevType != myItem.grouping) {
var seperator = document.createElement("option");
seperator.textContent = "----- " + myItem.grouping + " ------";
seperator.value = "";
seperator.disabled = true;
dropdown1.appendChild(seperator);
**********************
PrevType = myItem.grouping;
}
var NewOption = document.createElement("option");
NewOption.textContent = myItem.Name;
NewOption.value = myItem.SomeProperty;
dropdown1.appendChild(NewOption);
*********************
效果很好;但是,一旦我添加了以下 3 行(在 * 位置),第一个下拉列表就不再附加。
dropdown2 = document.getElementById("ddl2");
dropdown2.appendChild(seperator);
dropdown2.appendChild(NewOption);
添加这些行后,这些行仅附加到第二个 select 而不是第一个。
这个新元素当然应该附加到两个选项,或者它只能附加到一个选项并且必须为第二个选项创建第二个元素select?
是的,您必须创建一个新元素或克隆该元素才能在 DOM 中添加两次。喜欢:
var NewOption_copy = NewOption.cloneNode(true);
dropdown2.appendChild(NewOption_copy);
NewOption
是一个元素。追加元素时,它是移动的而不是克隆的。您应该创建 2 个选项或克隆第一个选项。现在发生的事情是您将选项附加到第一个 select 元素并立即将其移动到第二个 select 元素。
我有以下代码;
function SetupDropdowns() {
var PrevType;
dropdown1 = document.getElementById("ddl1");
******************
for (var i = 0; i < Cars.length; i++) {
var myItem = Items[i];
if (PrevType != myItem.grouping) {
var seperator = document.createElement("option");
seperator.textContent = "----- " + myItem.grouping + " ------";
seperator.value = "";
seperator.disabled = true;
dropdown1.appendChild(seperator);
**********************
PrevType = myItem.grouping;
}
var NewOption = document.createElement("option");
NewOption.textContent = myItem.Name;
NewOption.value = myItem.SomeProperty;
dropdown1.appendChild(NewOption);
*********************
效果很好;但是,一旦我添加了以下 3 行(在 * 位置),第一个下拉列表就不再附加。
dropdown2 = document.getElementById("ddl2");
dropdown2.appendChild(seperator);
dropdown2.appendChild(NewOption);
添加这些行后,这些行仅附加到第二个 select 而不是第一个。
这个新元素当然应该附加到两个选项,或者它只能附加到一个选项并且必须为第二个选项创建第二个元素select?
是的,您必须创建一个新元素或克隆该元素才能在 DOM 中添加两次。喜欢:
var NewOption_copy = NewOption.cloneNode(true);
dropdown2.appendChild(NewOption_copy);
NewOption
是一个元素。追加元素时,它是移动的而不是克隆的。您应该创建 2 个选项或克隆第一个选项。现在发生的事情是您将选项附加到第一个 select 元素并立即将其移动到第二个 select 元素。