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;"/>');

probably because it's invalid HTML. Why not set display:none directly to option? — Spokey
– Spokey, Commented Jun 13, 2013 at 16:52
styling the option to display:none doesn't hide it in IE ... that's exactly what I was doing until it was tested in IE — humbolight
– humbolight, Commented Jun 13, 2013 at 16:59

Brad M · Accepted Answer · 2013-06-13 16:52:07Z

4

The only valid child elements for <select> is <option> and <optgroup> (courtesy of Marcell)

answered Jun 13, 2013 at 16:52

Brad M

7,9101 gold badge25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

humbolight Over a year ago

Thank you. I was thoroughly confused.

user400654 · Accepted Answer · 2013-06-13 18:10:55Z

0

Don't append the option you want to hide, instead store it on the select.

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

Now if you wanted to add it back, it's conveniently stored on the select's data object.

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

answered Jun 13, 2013 at 18:10

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Collectives™ on Stack Overflow

jQuery.append() ignores element in htmlstring

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related