Question

我有一个文本输入和焦点输出，我有几个选择元素，我想填写文本字段的值。

我有很多带有＆＃39; NameSelect＆＃39;的选择标签。类

$('.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循环以获得正确的计数，它只会将选项输入附加到最新的对象，而不是所有这些。

我在这里缺少什么？

Answer 1

问题是因为NameOption拥有对option的引用，因此，如果您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()。

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

1 个答案: