URL : http://www.electrictoolbox.com/jquery-add-option-select-jquery/
select box의 내용 가져오기
$("#select_box > option:selected").val();
select box의 값 설정
$("#select_box > option[@value=지정값]").attr("selected", "true")
My last jQuery post looked at how to count the number of options in a select and then clear all options from the select. This post looks at how to add a new option to a select with jQuery.
Working Example
The following is an example showing an already populated select. Clicking the "Add option" button adds a new option to the end of the select and makes it the selected one. Clicking "Replace options" replaces them with a new set of options and then selects the "Green" one.
Note that the above example will not work if you are reading this in a feed reader. In this case click through to view this post in a web browser.
Adding a single option - by appending HTML
Adding a single option can be done by appending HTML to the select box. The select in the above example has an id of "example" i.e. <select id="example"> and using this method adding a new option by appending HTML can look like this:
1 | $('#example').append('<option value="foo" selected="selected">Foo</option>'); |
This newly added option will be the selected option; to change this behavior remove the selected="selected" part.
Adding a single option - by appending a new option - method 1
To avoid having to write and append HTML and stick with a more Javascript approach the new option can be appended with jQuery by creating a new option object. This next example does not work correctly in Internet Explorer; it will add the new option but only the value and not display any text.
1 | $('#example').append(new Option('Foo', 'foo', true, true)); |
The true, true part at the end will make this item the selected one.
Adding a single option - by appending a new option - method 2
This method gets a handle to the options and adds a new option to the array of options. This does work in Internet Explorer and is the more traditional Javascript way of adding options.
1 | var options = $('#example').attr('options'); |
2 | options[options.length] = new Option('Foo', 'foo', true, true); |
Adding multiple options
Using the final method above this last example shows how to replace the existing set of options with a new set, which may have been retrieved from an AJAX call or similar.
01 | var newOptions = { |
02 | 'red' : 'Red', |
03 | 'blue' : 'Blue', |
04 | 'green' : 'Green', |
05 | 'yellow' : 'Yellow' |
06 | }; |
07 | var selectedOption = 'green'; |
08 |
09 | var select = $('#example'); |
10 | var options = select.attr('options'); |
11 | $('option', select).remove(); |
12 |
13 | $.each(newOptions, function(val, text) { |
14 | options[options.length] = new Option(text, val); |
15 | }); |
16 | select.val(selectedOption); |
Lines 1 to 7 define the new options with an associative array and the one which will be selected. This is what might have been retrieved from an AJAX call.
Lines 9 and 10 cache a handles to #example and its options.
Line 11 removes all the existing options.
Lines 13 to 15 loop through the new options and add them to the select box.
And finally line 16 sets the selected option.
Alternative methods
There are some alternative methods to adding options to a select box with jQuery using various plug-ins and I may look at these in a future post.
Related posts:
- Get the number of options in a select with jQuery (Friday, January 15th 2010)
- jQuery Form Selectors (Friday, January 1st 2010)
- Post a form to a popup window with Javascript and jQuery (Friday, November 20th 2009)
- Accessing form elements by name with jQuery (Tuesday, June 23rd 2009)
- Clear a form with jQuery (Friday, June 19th 2009)
- How to get and set form element values with jQuery (Thursday, November 13th 2008)
(0) 
(0)Posted by 홍반장
