jquery - jQuery.append() ignores element in htmlstring

Question

Just curious if anyone has insight into this jQuery behavior, which seems buggy to me.

I have an empty select form element that I want to append options to, one of which is hidden by wrapping it in a span element with display style set to none.

snippet 1 - appends the options but ignores the span element:

var myOptions = '<option value="1">1</option><span style="display:none;"><option value="2">2</option></span>';
$('#mySelect').append(myOptions);

snippet 2 - works as intended:

var myOptions = '<option value="1">1</option><option value="2">2</option>';
$('#mySelect').append(myOptions);
$('#mySelect').find('options:eq(1)').wrap('<span style="display:none;"/>');

Answer 1

唯一有效的子元素<select>是<option>和<optgroup>（由 Marcell 提供）

Answer 2

不要附加要隐藏的选项，而是将其存储在选择中。

var myOptions = $.parseHTML('<option value="1">1</option><option value="2">2</option>');
$('#mySelect').append(myOptions.eq(0)).data("hiddenOptions",myOptions.eq(1));

现在，如果您想重新添加它，它可以方便地存储在选择的数据对象中。

$("#mySelect").data("hiddenOptions").appendTo("#mySelect")