0

I have a select and I want to clone it, then append after it with the same selected option.

HTML

<select>
    <option value="0">test0</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
</select>

javascript

(function($){
$('select').change(function(){
    $clone = $(this).clone();
    $(this).after($clone);
});
})(jQuery)

jsFiddle

http://jsfiddle.net/willHsu/3tRR9/

The way I find is to use

var value = $(this).children('option:selected').val();

to find the value then choose as a selected option. So I know the way to solve it.

but I still wonder why clone() method can't copy the selected option status? can anyone give me a reasonable explanation?

doniyor
  • 36,596
  • 57
  • 175
  • 260
Will
  • 221
  • 3
  • 12
  • 3
    Because: "**Note:** For performance reasons, the dynamic state of certain form elements (e.g., user data typed into textarea and user selections made to a select) is not copied to the cloned elements. When cloning input elements, the dynamic state of the element (e.g., user data typed into text inputs and user selections made to a checkbox) is retained in the cloned elements." From the API documentation for [`clone()`](http://api.jquery.com/clone/). – David Thomas Aug 01 '14 at 16:24
  • The same thing happens without jquery, using straight javascript. [Fiddle](http://jsfiddle.net/33pzf/) – James Aug 01 '14 at 16:44
  • @David Thomas Thanks for your clear comment． – Will Aug 01 '14 at 16:54

0 Answers0