CODEWITHSUNDEEP
javascriptjquery
Computer User
Computer User

Reputation: 546

jQuery - Append Option to Option object

I have a 2 select boxes. The first select box alters the second. The second can have a small set of variable options.

What I have done is when the page loads I save the options as a variable.

var optionList = $('select[name="location"] option');

When the first select box changes. I then do something like below matching the value of the first select box to a switch statement then knocking out and adding new options to select box 2.

case 'add':
    $('select[name="location"] option').remove();
    $(optionList).each(function() {
        $('select[name="location"]').append($(this));
    });
    $('select[name="location"] option:not(option[value="cart"])').remove();
break;

This all works fine.

What I need to do now is add an option to the optionList. I have tried both append and after. Append adds a new option inside the last option. After causes a jQuery error. Any idea how I do this?

var html = '<option value="'+v+'">'+l+'</label>';
$(optionList).append(html); // Fails
$(optionList).after(html); // jQuery error line 3

Upvotes: 1

Views: 975

Answers (2)

BrianFreud
BrianFreud

Reputation: 7454

$('select[name="location"] option'); is selecting the options which are part of that select. So when you do $(optionList).append(html);, you are appending "html" to the each option in that results list.

Personally, I'd typically do something like:

var $mySelect = $('select[name="location"]');
var optionList = $mySelect.find('option');
...
$mySelect.append(html);

but you could also do something like this:

var optionList = $('select[name="location"] option');
...
optionList.filter(':first').parent().append(html);

The second option is less performant though.

optionList.push(html) didn't work because optionList is a jQuery-wrapped array of options (each one a jQuery-wrapped option), not a select's list of options within document.forms.
optionList.push($(html)) worked beause you wrapped the raw DOM element "html" with jQuery, and thus you were just adding another jQuery-wrapped option to optionList. You could save a character (and be a bit more jQueryish) if you instead did optionList.add($(html)). However, either of those would only add the "html" element to the optionList collection; it wouldn't actually add "html" to the DOM.

Last, two side notes... First, appending like you're doing in that loop is a really bad idea; you're hitting the DOM, and also triggering a repaint, on each time through the loop. You're far better creating an array of options, then doing something like jQuery.fn.append.apply($('select[name="location"]'), objectArray); That only does a single hit on the page, and triggers only one repaint. See http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly for more.

Second, $(optionList) is redundant and costs you some performance. optionList is already a jQuery object - ie, $('select[name="location"] option'). $(optionList) invokes the jQuery constructor, only to have it realize that optionList is already a jQuery object, and internally it is then converting your use of $(optionList) into jQuery actually just using optionList.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Firstly, you are appending an option tag, with a closing label tag, it should be:

var html = '<option value="'+v+'">'+l+'</option>';

Secondly, with the code you have it will append your new option after every existing option (as optionList is an array of all the existing option elements).

Instead you should just append it to the select element, like this:

$('select[name="location"]').append(html);

Upvotes: 1

Related Questions