javascript - 对于通过 html 元素和追加仅追加到最后一个元素

Question

我有一个文本输入和 focusout，我有几个选择元素，我想用文本字段的值填充它们。

我有一堆带有“NameSelect”类的选择标签

$('.textField').focusout(function() { 
   var name = $(this).val();

   var NameOption = $('<option>', { value: name, text: name, attrid: '1'});

   var selects = $('#mainForm').find('.NameSelect');

   $(selects).each(function(i, obj) {
       console.log($(obj));  // it seems to get the right select
       $(obj).append(NameOption);
   })
}

但是，当我这样做时，即使选择获得所有正确的元素和 for 循环以获得正确的计数，它也只会将选项输入 append 到最新的对象，而不是所有的对象。

我在这里错过了什么？

Answer 1

问题是因为 NameOption 持有对 option 的引用，因此如果您 append() 它多次，它将在每个之间移动父元素。

要解决此问题，您可以在 append 元素时clone()该元素:

selects.append(NameOption.clone());

或者您可以只为 append() 提供一个字符串，以便在每次调用时创建一个新元素:

$('.textField').focusout(function() { 
   var name = $(this).val();
   $('#mainForm').find('.NameSelect').append('<option value="' + name + '" attrid="1">' + name + '</option>');
   })
});

请注意，在这两种情况下，each() 都不是必需的。