select2 - how can I init and default to placeholder when no value is selected?
up vote
1
down vote
favorite
I am trying to get select2 to display placeholder when HTML <select> does not have an option selected.
My HTML select - no options have "selected" attribute and there's no "empty" option either:
<select id="el" style="width:300px">
<option value="1">United States</option>
<option value="2">Canada</option>
</select>
On page load I do this:
$('#el').val(null);
As a result, my combo looks like this - you can see that no option is selected:
Then, I init select2:
$('#el').select2({
allowClear: true,
placeholder: '(select...)'
});
and combo turns into select2 control with "United States" being selected:
However, I would like it to look like this:
I.e. when my combo's value is NULL (or selectedIndex is -1), I would like select2 to display the placeholder (select...) as opposed to the first <option>.
javascript jquery-select2 jquery-select2-4
edited 16 hours ago
Nick
2,33312043
asked Apr 13 '16 at 18:27
temuri
1,34232347
add a comment |
up vote
1
down vote
favorite
I am trying to get select2 to display placeholder when HTML <select> does not have an option selected.
My HTML select - no options have "selected" attribute and there's no "empty" option either:
<select id="el" style="width:300px">
<option value="1">United States</option>
<option value="2">Canada</option>
</select>
On page load I do this:
$('#el').val(null);
As a result, my combo looks like this - you can see that no option is selected:
Then, I init select2:
$('#el').select2({
allowClear: true,
placeholder: '(select...)'
});
and combo turns into select2 control with "United States" being selected:
However, I would like it to look like this:
I.e. when my combo's value is NULL (or selectedIndex is -1), I would like select2 to display the placeholder (select...) as opposed to the first <option>.
javascript jquery-select2 jquery-select2-4
edited 16 hours ago
Nick
2,33312043
asked Apr 13 '16 at 18:27
temuri
1,34232347
Possible duplicate of stackoverflow.com/questions/21413241/…. See answer
– smcd
Apr 13 '16 at 18:41
The "accepted" answer does not work in the suggested solution. Firstly, it does not render the placeholder, secondly it also renders empty element as first option. Not helpful.
– temuri
Apr 13 '16 at 20:40
2
It does work? jsfiddle.net/kqqeet2s/1 from the documentation select2.github.io/…
– smcd
Apr 13 '16 at 21:25
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I am trying to get select2 to display placeholder when HTML <select> does not have an option selected.
My HTML select - no options have "selected" attribute and there's no "empty" option either:
<select id="el" style="width:300px">
<option value="1">United States</option>
<option value="2">Canada</option>
</select>
On page load I do this:
$('#el').val(null);
As a result, my combo looks like this - you can see that no option is selected:
Then, I init select2:
$('#el').select2({
allowClear: true,
placeholder: '(select...)'
});
and combo turns into select2 control with "United States" being selected:
However, I would like it to look like this:
I.e. when my combo's value is NULL (or selectedIndex is -1), I would like select2 to display the placeholder (select...) as opposed to the first <option>.
javascript jquery-select2 jquery-select2-4
edited 16 hours ago
Nick
2,33312043
asked Apr 13 '16 at 18:27
temuri
1,34232347
I am trying to get select2 to display placeholder when HTML <select> does not have an option selected.
My HTML select - no options have "selected" attribute and there's no "empty" option either:
<select id="el" style="width:300px">
<option value="1">United States</option>
<option value="2">Canada</option>
</select>
On page load I do this:
$('#el').val(null);
As a result, my combo looks like this - you can see that no option is selected:
Then, I init select2:
$('#el').select2({
allowClear: true,
placeholder: '(select...)'
});
and combo turns into select2 control with "United States" being selected:
However, I would like it to look like this:
I.e. when my combo's value is NULL (or selectedIndex is -1), I would like select2 to display the placeholder (select...) as opposed to the first <option>.
javascript jquery-select2 jquery-select2-4
javascript jquery-select2 jquery-select2-4
edited 16 hours ago
Nick
2,33312043
asked Apr 13 '16 at 18:27
temuri
1,34232347
edited 16 hours ago
Nick
2,33312043
asked Apr 13 '16 at 18:27
temuri
1,34232347
edited 16 hours ago
Nick
2,33312043
edited 16 hours ago
Nick
2,33312043
edited 16 hours ago
Nick
2,33312043
2,33312043
asked Apr 13 '16 at 18:27
temuri
1,34232347
asked Apr 13 '16 at 18:27
temuri
1,34232347
asked Apr 13 '16 at 18:27
temuri
1,34232347
1,34232347
Possible duplicate of stackoverflow.com/questions/21413241/…. See answer
– smcd
Apr 13 '16 at 18:41
The "accepted" answer does not work in the suggested solution. Firstly, it does not render the placeholder, secondly it also renders empty element as first option. Not helpful.
– temuri
Apr 13 '16 at 20:40
2
It does work? jsfiddle.net/kqqeet2s/1 from the documentation select2.github.io/…
– smcd
Apr 13 '16 at 21:25
add a comment |
Possible duplicate of stackoverflow.com/questions/21413241/…. See answer
– smcd
Apr 13 '16 at 18:41
The "accepted" answer does not work in the suggested solution. Firstly, it does not render the placeholder, secondly it also renders empty element as first option. Not helpful.
– temuri
Apr 13 '16 at 20:40
2
It does work? jsfiddle.net/kqqeet2s/1 from the documentation select2.github.io/…
– smcd
Apr 13 '16 at 21:25
Possible duplicate of stackoverflow.com/questions/21413241/…. See answer
– smcd
Apr 13 '16 at 18:41
Possible duplicate of stackoverflow.com/questions/21413241/…. See answer
– smcd
Apr 13 '16 at 18:41
The "accepted" answer does not work in the suggested solution. Firstly, it does not render the placeholder, secondly it also renders empty element as first option. Not helpful.
– temuri
Apr 13 '16 at 20:40
The "accepted" answer does not work in the suggested solution. Firstly, it does not render the placeholder, secondly it also renders empty element as first option. Not helpful.
– temuri
Apr 13 '16 at 20:40
2
2
It does work? jsfiddle.net/kqqeet2s/1 from the documentation select2.github.io/…
– smcd
Apr 13 '16 at 21:25
It does work? jsfiddle.net/kqqeet2s/1 from the documentation select2.github.io/…
– smcd
Apr 13 '16 at 21:25
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f36606622%2fselect2-how-can-i-init-and-default-to-placeholder-when-no-value-is-selected%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Possible duplicate of stackoverflow.com/questions/21413241/…. See answer
– smcd
Apr 13 '16 at 18:41
The "accepted" answer does not work in the suggested solution. Firstly, it does not render the placeholder, secondly it also renders empty element as first option. Not helpful.
– temuri
Apr 13 '16 at 20:40
2
It does work? jsfiddle.net/kqqeet2s/1 from the documentation select2.github.io/…
– smcd
Apr 13 '16 at 21:25