Question

您好我正在尝试将一个表中的值更新为具有不同ID的2个下拉列表。但只有一个下拉列表有值，其他下拉列表为空。我哪里错了。
如果我使用两种不同的方法，但我不想要重复的代码。

function updateDropDown(){     
         var DD1 = "#DD1",TempChild = null;
         var DD2= '#DD2';
         var Data= Table.getLength();
         $(DD1).html('');
         $(DD2).html('');
            for(var i =0;i<Data;i++){
               TempChild= document.createElement('option');
               TempChild.value =  Table.getItem(i).id;
               TempChild.innerHTML = Table.getItem(i).name;
               $(DD1).append(TempChild);
               $(DD2).append(TempChild);
               TempChild = null;
           }
     }

Answer 1

虽然TempChild是一个只有一个副本的元素。它可以放在一个地方。因此，要将其放在另一个元素中，您需要使用document.createElement创建一个类似的元素，或者只是克隆它。

这样做

function updateDropDown(){     
         var DD1 = "#DD1",TempChild = null;
         var DD2= '#DD2';
         var Data= Table.getLength();
         $(DD1).html('');
         $(DD2).html('');
            for(var i =0;i<Data;i++){
               TempChild= document.createElement('option');
               TempChild.value =  Table.getItem(i).id;
               TempChild.innerHTML = Table.getItem(i).name;
               $(DD1).append(TempChild);
               $(DD2).append(TempChild.cloneNode(true));
               TempChild = null;
           }
     }

Answer 2

您不能在两个不同的其他元素（DD1和DD2）中附加相同的元素（TempChild）。 TempChild是独一无二的。你必须复制它。

Answer 3

这是因为已经插入了创建的元素。一种方法是克隆节点或创建HTML作为字符串并插入它。

此外，我更喜欢将选项创建为字符串，而不是在每次迭代时创建一个节点，因为当数据数组太大时，这可能会达到一些性能;

function updateDropDown() {
    var DD1 = "#DD1",
        TempChild = null,
        DD2 = '#DD2',
        Data = Table.getLength();

    $(DD1).html('');
    $(DD2).html('');
    var options = '';
    for (var i = 0; i < Data; i++) {
        options +=
            '<option value="' + Table.getItem(i).id + '">' + Table.getItem(i).name + '</option>';
    }

    $(DD1).append(options);
    $(DD2).append(options);
}

Answer 4

你可以使用$.clone并首先创建选项数组，而不是在每个循环中写入DOM

<强> Demo

var DD1 = "#DD1",
      TempChild = null,
      DD2 = '#DD2',
      Data = [], 
      options = [];;

  Data.push({id: 'test',name: 'test'});
  Data.push({id: 'test1',name: 'test1'});


  for (var i = 0; i < Data.length; i++) {
    TempChild = document.createElement('option');
    TempChild.value = Data[i].id;
    TempChild.text = Data[i].name;
    options.push(TempChild);
    TempChild = null;
  }
  $(DD1).append(options);
  $(DD2).append($(options).clone());

Answer 5

如果您在问题中使用 jquery ，那么标记，为什么不利用魔法并将代码缩减为：

JQuery代码：

updateDropDown = function(){
    for(var i =0;i<Table.getLength();i++){
        TempChild=$('<option></option>').val(Table.getItem(i).id).text(Table.getItem(i).name);

        $("#DD1").html(TempChild);
        $("#DD2").html(TempChild);

        TempChild = null;
    }
}

这将解决您的问题并同时减少代码，祝您好运。

使用相同数据更新2下拉列表

5 个答案: