1

I have a problem with .append() function. I created a <select/> element in jquery, and I'm appending it to many table rows, with (sample classes):

var $select = $('<select class="my-select" ><option></option></select>');
$('‪#‎mytable‬ tr.first_row td.first_cell').append($select.clone());
$('‪#‎mytable‬ tr.second_row td.first_cell').append($select.clone());

then, I want to add a new <option/> to that select, so I do like this:

var new_option = $('<option/>').val('value').text('text');
$('.my-select').append(new_option); //works
$select.append(new_option); //doesn't work

Everything works fine, the select is added to any table row, and the new_option is appended to any of those <select>, but I can't append it to the $select element.... I tried in many ways but it seems impossible... I also tried:

$select.find('option:last').after(new_option); //doesn't work
$select.find('option:last').before(new_option); //doesn't work
new_option.appendTo($select); //doesn't work

Here is the fiddle http://jsfiddle.net/v15zyzxj/4/

Anyone has any idea why this should not work? It looks like something extremely easy, but I can't sort this problem out, I hope someone can help me understand what's going on..

Yuri
  • 3,082
  • 3
  • 28
  • 47
  • Use string instead of jQuery object, `var $select = ''; $('‪#‎mytable‬ tr.first_row td.first_cell').append($select); $('‪#‎mytable‬ tr.second_row td.first_cell').append($select);` – Tushar Oct 26 '15 at 14:45
  • Are you absolutely sure `$select` is not modified in any way between the two lines of code? – Frédéric Hamidi Oct 26 '15 at 14:49
  • Yes Frederic. $select is never modified except for appending new options.. – Yuri Oct 26 '15 at 14:53
  • 1
    You are appending cloned element of $select, not $select itself, then you append option to $select, not cloned element – A. Wolff Oct 26 '15 at 14:58
  • With this `$('.my-select').append(new_option);` I add the new option to elements on the DOM, and it works. I can't append the new option to the dynamic element I'm holding in jquery. – Yuri Oct 26 '15 at 15:03
  • @Yuri _" I can't append the new option to the dynamic element I'm holding in jquery. "_ See post – guest271314 Oct 26 '15 at 15:04
  • 1
    @Yuri if you check in console, you would see the option is added to $select, just that this element isn't part of DOM. Keep ref on cloned element, see guest's answer. Now regarding your last comment, im quite confused what is your expected behaviour – A. Wolff Oct 26 '15 at 15:06
  • @A.Wolff, I would expect seing the new appended option if I console.log($select) after .append(new_option)...at least. But this doesn't happen, nor future appended selects have new_options – Yuri Oct 26 '15 at 15:12
  • 1
    The phrase, ***does not work***, usually makes sense when accompanied by **expected behavior** (thanks @A.Wolff) and **actual behavior**. Right now none of us really knows what your issue is. :-( – PeterKA Oct 26 '15 at 15:15
  • @Yuri `.append()` removes element from `DOM` and places it in element `.append()` called on. To use `.append(clone)` multiple times on different elements call `.clone()` on variable `clone` , e.g., `$(element1).append(clone)` , `$(element2).append(clone.clone())` – guest271314 Oct 26 '15 at 15:16
  • @Yuri not sure how do you check it but your observation is wrong as i understand it – A. Wolff Oct 26 '15 at 15:17
  • 1
    Works fine when you [**append to the DOM**](http://jsfiddle.net/fiddleyetu/ep4v55dz/). I can see now how the confusion is coming -- look at the console output **Firebug Lite**; it can be misleading. But if you look at your [**browser's console output**](http://jsfiddle.net/fiddleyetu/ep4v55dz/1/), it's all there - ``. – PeterKA Oct 26 '15 at 15:22
  • @PeterKA thx, i would had never think about checking using firebug lite and ya could explain OP observation – A. Wolff Oct 26 '15 at 15:25
  • Here you can see what I mean. Check the console when adding row and option http://jsfiddle.net/v15zyzxj/3/ – Yuri Oct 26 '15 at 15:27
  • Again append() moves element, here option. Im currently on tablet so im sorry but it is hard for me to update jsfiddle – A. Wolff Oct 26 '15 at 15:34
  • So sound like you are thinking that each time you call append() a copy of appended element is added but in fact same element is added meaning if you appended previously inside other element, then the appended element is removed from it. Sorry if this is quite unclear – A. Wolff Oct 26 '15 at 15:44
  • That's why I use .append($select.clone()); Am I using it wrongly? – Yuri Oct 26 '15 at 15:47
  • This is what i mean http://jsfiddle.net/v15zyzxj/7/ sorry for the alert but easier for me on tablet and anyway most broser console update object on the fly so – A. Wolff Oct 26 '15 at 15:49
  • New Page here http://stackoverflow.com/questions/33350072/cant-append-option-to-select-element – Yuri Oct 26 '15 at 15:52

2 Answers2

2

The new option element just created and added to $select is being removed and added to .my-select elements on the DOM. To avoid that, add a clone to $select as suggested below.

Just change:

$select.append(option);

To:

$select.append(option.clone());

DEMO

PeterKA
  • 24,158
  • 5
  • 26
  • 48
1

Appear to append at stacksnippets

var $select = $('<select class="my-select" ><option></option></select>');
// define variable `clone`
var clone = $select.clone();
var new_option = $('<option/>').val('value').text('text');
$select.append(new_option); 

$("body").append($select);

var new_option2 = $('<option/>').val('value').text('text2');
clone.append(new_option2);
$("table tr").append(clone);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
  <tr></tr>
    </tbody>
</table>
guest271314
  • 1
  • 15
  • 104
  • 177
  • This wouldn't work in the case I have to append the clone to 2 different rows http://jsfiddle.net/v15zyzxj/ – Yuri Oct 26 '15 at 15:10
  • @Yuri `.append()` removes element from `DOM` and places it in element `.append()` called on . Try cloning `.clone` at `.second` `$("table tr.second td").append(clone.clone());` http://jsfiddle.net/v15zyzxj/1/ – guest271314 Oct 26 '15 at 15:14
  • I made a pretty compelte fiddle where you can see my same error. What I'm doing wrong? http://jsfiddle.net/v15zyzxj/2/ – Yuri Oct 26 '15 at 15:23
  • @Yuri _"made a pretty compelte fiddle where you can see my same error. What I'm doing wrong?"_ What is "error" ? Appear to return expected results at http://jsfiddle.net/v15zyzxj/2/ ? If click `"ADD ROW"` a new `tr` is appended . If click `"ADD OPTION"` `option` elements are appended to the `select` at most recently appended `tr` – guest271314 Oct 26 '15 at 15:28
  • then, try adding new row after having added a option. – Yuri Oct 26 '15 at 15:29
  • @Yuri _"then, try adding new row after having added a option"_ Yes ? Not certain what expected result is ? Perhaps beyond scope of original Question ? Try creating new Question including `html` , `js` at jsfiddle , ask specific Question as to that process ? – guest271314 Oct 26 '15 at 15:32
  • New question here http://stackoverflow.com/questions/33350072/cant-append-option-to-select-element – Yuri Oct 26 '15 at 15:52
  • No. I had to .clone() the new option. – Yuri Oct 26 '15 at 16:01
  • @Yuri _"had to .clone() the new option. "_ Yes, see post at `var clone = $select.clone();` , comment at http://stackoverflow.com/questions/33348582/cant-append-option-to-select/33348854?noredirect=1#comment54493749_33348854 . – guest271314 Oct 26 '15 at 16:03
  • I had to clone the new option, not the select. I only need to clone the select when appending it. But if I have to append an option to both $select and DOM elements, I have to .append(new_option.clone()) – Yuri Oct 26 '15 at 16:07