clone() does not include selectedIndex on a select form element

[martijn@…]

A form select element like:

<select id="breakfast"><option>included</option><option>excluded</option></select>

will not have it's selectedIndex cloned if it is set on the fly. For instance if the user selects a specific template which will set some values in the form (including the above select to excluded). The cloned element will have a selectedIndex of 0 instead of 1.

element = $('#' + part + ' input[type!="hidden"], #' + part + ' select, #' + part + '[type="checkbox"]');                    
element.each(function(i, e) {
    c = $(e).clone();
    $(e).attr({name: 'showforhidden', disabled: true}).after(c.attr('disabled', false).hide());
});

The idea of this piece of jQuery is to append the original (now hidden) element after the new visible but disabled element.

[dmethvin]

I think that is to be expected. The .selectedIndex is a property of the dynamic DOM element's state and not an attribute in the tag's markup. According to the W3C, the DOM cloneNode() only copies attributes:

 http://www.w3.org/TR/DOM-Level-2-Core/core.html

Browsers aren't consistent, however; if you cloned an input[type=text] it uses the current value property that reflects input the user typed. And I know we've tried to play heroics with check boxes on this.

 http://jsfiddle.net/dmethvin/BUk3c/

My inclination is to close this wontfix because it's not worth the extra code for the few times people need it.

[timmywil]

agreed. Users can reselect if necessary.

[anonymous]

Although reselecting is not possible since the new element will replace the current and be disabled, while the other is hidden. This ensures a 'template-like' form, in which the user will see some values set but cannot change them. The hidden elements are required to send over required data.

I agree that the most simple fix is to manually carry over the selectedIndex as I have done now. Thanks for the responses!

[sindresorhus]

#11058 is a duplicate of this ticket.