Simple question, yet no answers yet. Is it possible to set the selectedIndex of the Select2 dropdown via an ordinal number? I'm using Select2 version 3.5.2 and find it quite easy to have a selected item using a value as in:

$(elem).select2('val','my value',false);

however, trying to make a selection via an ordinal, pletely escapes me. Some examples of what works with a normal dropdown, but not with Select2:

$(elem + " option")[1].selected = true; //no worky
$(elem + " option:eq(1)").attr("selected", "selected"); //no worky
$(elem).prop({ selectedIndex: 1 });//no worky

The reason I need this is to have a default selection that's not the first one, as the Select2 uses the first option (Index: 0) to fill in the hints, so I want to default to Index: 1 (and they can have many different values, so I can't just set the selected option via a value - it must be an ordinal.

UPDATE: The problem may be here (the value is empty for all the ALL selections as well as the required empty option) - it may be confused.

<option selected="selected" value=""></option>
<option value="">All Sizes</option>
<option value="6ad0a51e-e58c-4431-914d-b3f1a6b2c08e">18in X 18in</option>
<option value="a00b492e-08fa-4824-ad86-9ffb8a510be2">9.75in X 39in</option>
<option value="423b2a4e-2876-4969-84e3-3601e3fab524">19.7in X 19.7in</option>
<option value="9d4f4f13-47f6-422c-bbaf-f0911b5c156c">12in x 36in</option>
<option value="d417f0bc-d1fe-4d6b-bf41-aa081907254c">22in X 22in</option>
<option value="d1dc3ca6-fc3c-47f8-8b71-80219c8fd98b">24in X 24in</option>
<option value="c92c91a3-dfdb-4240-83e2-c08771748e47">18in x 36in</option>
<option value="4741d76f-628f-4ca0-a871-dfe2c4986e66">19.7in X 39.4in</option>
<option value="f70791ba-c56a-403b-b23e-fb2e8869ba07">36in X 36in</option>
<option value="7f70b445-a890-4838-a9f5-4c3100643fdd">39in X 39in</option>

I'll give the first option a value ("all sizes","all colors", "only in-stock items", "sale categories only", etc) and set them to the same value like "-" from the database as the first item (that way, I don't need to pare). It would still be nice to set a selectedIndex (lot's of old code to be updated) - I'll post it in their requests for future revisions of Select2

UPDATE: Here's what the function looks like

function setDD(elem, qs) {
    var q = QueryString(qs);
    if (!(typeof q === "undefined")) {
        if (q === '') {
            //$(elem + " option")[1].selected = true; //no worky
            //$(elem + " option:eq(1)").attr("selected", "selected"); //no worky
            //$(elem).prop({ selectedIndex: 1 });//no worky
            //$(elem).find("option:eq(1)").prop("selected", "selected"); //no worky
            //$(elem + " option:eq(1)").prop("selected", "selected");  //no worky
            //$(elem).prop('selectedIndex', 1).change(); //no worky
        } else {
            $(elem).select2('val', q, false);
        };
    }; //else leave the dropdown at its default to show the hint (until user actually makes a selection)
};

Simple question, yet no answers yet. Is it possible to set the selectedIndex of the Select2 dropdown via an ordinal number? I'm using Select2 version 3.5.2 and find it quite easy to have a selected item using a value as in:

$(elem).select2('val','my value',false);

however, trying to make a selection via an ordinal, pletely escapes me. Some examples of what works with a normal dropdown, but not with Select2:

$(elem + " option")[1].selected = true; //no worky
$(elem + " option:eq(1)").attr("selected", "selected"); //no worky
$(elem).prop({ selectedIndex: 1 });//no worky

The reason I need this is to have a default selection that's not the first one, as the Select2 uses the first option (Index: 0) to fill in the hints, so I want to default to Index: 1 (and they can have many different values, so I can't just set the selected option via a value - it must be an ordinal.

UPDATE: The problem may be here (the value is empty for all the ALL selections as well as the required empty option) - it may be confused.

<option selected="selected" value=""></option>
<option value="">All Sizes</option>
<option value="6ad0a51e-e58c-4431-914d-b3f1a6b2c08e">18in X 18in</option>
<option value="a00b492e-08fa-4824-ad86-9ffb8a510be2">9.75in X 39in</option>
<option value="423b2a4e-2876-4969-84e3-3601e3fab524">19.7in X 19.7in</option>
<option value="9d4f4f13-47f6-422c-bbaf-f0911b5c156c">12in x 36in</option>
<option value="d417f0bc-d1fe-4d6b-bf41-aa081907254c">22in X 22in</option>
<option value="d1dc3ca6-fc3c-47f8-8b71-80219c8fd98b">24in X 24in</option>
<option value="c92c91a3-dfdb-4240-83e2-c08771748e47">18in x 36in</option>
<option value="4741d76f-628f-4ca0-a871-dfe2c4986e66">19.7in X 39.4in</option>
<option value="f70791ba-c56a-403b-b23e-fb2e8869ba07">36in X 36in</option>
<option value="7f70b445-a890-4838-a9f5-4c3100643fdd">39in X 39in</option>

I'll give the first option a value ("all sizes","all colors", "only in-stock items", "sale categories only", etc) and set them to the same value like "-" from the database as the first item (that way, I don't need to pare). It would still be nice to set a selectedIndex (lot's of old code to be updated) - I'll post it in their requests for future revisions of Select2

UPDATE: Here's what the function looks like

function setDD(elem, qs) {
    var q = QueryString(qs);
    if (!(typeof q === "undefined")) {
        if (q === '') {
            //$(elem + " option")[1].selected = true; //no worky
            //$(elem + " option:eq(1)").attr("selected", "selected"); //no worky
            //$(elem).prop({ selectedIndex: 1 });//no worky
            //$(elem).find("option:eq(1)").prop("selected", "selected"); //no worky
            //$(elem + " option:eq(1)").prop("selected", "selected");  //no worky
            //$(elem).prop('selectedIndex', 1).change(); //no worky
        } else {
            $(elem).select2('val', q, false);
        };
    }; //else leave the dropdown at its default to show the hint (until user actually makes a selection)
};

• javascript
• jquery
• jquery-select2
• selectedindex

• $(elem + " option:eq(1)").prop("selected", "selected"); try using prop instead of attr or like this $(elem).find("option:eq(1)").prop("selected", "selected"); – guradio Commented Jul 29, 2017 at 4:55
• unfortunately, this is ignored as well. Works great on the plain old select dropdown, just not on Select2. I noticed version 4.0 has no means of selecting an option by index, either (at least not in the documentation). – MC9000 Commented Jul 29, 2017 at 5:27
• If you change the value of the original select element, you need to trigger its change event to get the Select2 control to update. Try $(elem).prop('selectedIndex', 1).change();. – John S Commented Jul 29, 2017 at 5:34
• no joy with this, either. I'll try the change with the other methods, see if it works. – MC9000 Commented Jul 29, 2017 at 5:53
• 1 You are not going to be able to get this to work if you have two options with the same value. That is, you will not be able to select the second one by index. If you change the underlying select element, the Select2 control doesn't know to update until you trigger the change event. But when the change event is triggered, the Select2 control updates itself by getting the value of the selected option, not the index of that option. So having two options with the same value is going to cause Select2 to select the first one that matches. – John S Commented Jul 29, 2017 at 16:26

3 Answers 3

Although Select2 does not provide a method for selecting by index, you can set the value of the underlying <select> element by index. Of course, whenever you change the value of the underlying <select> element, you need to trigger its change event in order for the Select2 control to know that it needs to update itself to match.

So you can do:

$(elem).prop('selectedIndex', 1).change();

But this is not going to work if the selected index refers to an option that does not have a unique value. When the Select2 control updates itself, it looks at the value of the underlying <select> element, not its selected index.

Of course, you can't select a non-unique option by value, but you could trying using the Select2 "data" method, like this:

var $option = $(elem).children().eq(1);
$(elem).select2('data', { id: $option.val(), text: $option.text() });

In the general case, one issue I see with this is that when the Select2 is opened (i.e., the drop-down is shown), the highlighted option is the first one in the list with the non-unique value. If the user then presses the Tab key, that option will bee the selected option.

jsfiddle

But for your limited case, where the only non-unique options are two options with empty values, and the first of which has no text (i.e., an empty body), then the code above appears to work.

I assume that you are specifying the "placeholder" option with the "allowClear" option set to true. Otherwise the user can never switch back to the empty option. (So why have it.)

jsfiddle

$('select').val('US'); // Change the value or make some change to the internal state
$('select').trigger('change.select2'); // Notify only Select2 of changes

try this one.

The jQuery Select2 control does not allow selecting of an option by it's ordinal index. The ONLY solution is to set a selected option by it's value (at least in version 3.5). I hate this answer!