Add a option to a selectbox list with jquery

Question

I use this jquery function to populate a dropdown box. Works great, but I want to add an option:

<option value="">select</option>

the first option! How is this to be done?

function populate_cantons() {
    $.getJSON('http://domain.com/v3/ajax/fetch_canton.php', {country:$('#country').val()}, function(data) {
        var select = $('#cantons');
        var options = select.prop('options');
        $('option', select).remove();
        $.each(data, function(index, array) {
            options[options.length] = new Option(array['canton']);
        });
    });
}

Jared Farrish · Accepted Answer · 2011-12-18 12:21:48Z

1

<select id="cantons">
    <option>This is 1</option>
    <option>This is 2</option>
    <option>This is 3</option>
</select>

var select = $('#cantons');
select.find('option:eq(0)').next().attr('selected', true);

http://jsfiddle.net/RhhAZ/1/

Note, I'm using .next() to show it works. It will select the first option without it. Usually, the first option in a select will be selected if no other one is.

EDIT

var select = $('#cantons');
select.prepend('<option selected>Select</option>');

http://jsfiddle.net/RhhAZ/4/

edited Dec 18, 2011 at 12:21

answered Dec 18, 2011 at 12:12

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mark Henry Over a year ago

I want to prepend on option. Not set the selection on an existing option.

Jared Farrish Over a year ago

@mark - I edited it again after I realized some of your markup wasn't displaying in the question.

Collectives™ on Stack Overflow

Add a option to a selectbox list with jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related