Setting selected attribute on options for multiple/remote selects

[andrewtweber]

On the examples page, Multiple select boxes.
https://select2.github.io/examples.html

As you can see, I've selected both Alaska and Hawaii. So why is the selected attribute not set on the <option> elements for those two options ? How am I supposed to know what is selected when I actually submit the form?

Similarly for the remote data, I selected a repository, but the select/select2 option is still set to selected, instead of the new option. Why is the new option not marked as selected ? If I were to submit this form now, the value submitted through POST would be select/select2 instead of the one that's actually selected.

[andrewtweber]

Additionally I noticed that when you delete a multiple option, it doesn't actually delete the <option> element or remove the selected attribute if I've artificially added it in. I don't get it... why doesn't this make use of the options and select attributes out of the box?

[kevin-brown]

So why is the selected attribute not set on the <option> elements for those two options?

Select2 uses the selected property of the HTMLOptionElement, which is the JavaScript API for determining whether or not an <option> is selected. The reason why the Chrome inspector does not show the selected attribute is because the Chrome inspector does not track the DOM property.

How am I supposed to know what is selected when I actually submit the form?

You have two ways of knowing what is selected

1. Look at the form data that is sent: It's exactly what you would have expected.
2. Use the :selected selector, supported by modern browsers and polyfilled by jQuery for older browsers. It's what Select2 uses internally.

If I were to submit this form now, the value submitted through POST would be select/select2 instead of the one that's actually selected.

Did you ever get around to testing this hypothesis? I'm curious what the results were.

[andrewtweber]

Thanks for the explanation.

When I did a remote data source + multiple selection, PHP was only receiving one POST value, can't remember if it was first or last. I'll try testing the exact code on the example page when I get back from vacation in a week.

[andrewtweber]

Turns out I just didn't include the brackets when naming the select. <select name="categories[]" multiple etc...>

Thanks again for the explanation though, that still would have puzzled me.

[aa21]

Look at the form data that is sent: It's exactly what you would have expected.

@kevin-brown not when you do $(form).serialize() and $.ajax. The selected options / submitted data are not correct. It loses first selected option and in the source code I can see that it's keeping options that I deleted .... :-(

[nickicool]

How add "selected" for each inserted dynamicaly with Ajax? Without this, my php framework does not get the selected categories. I don't know what to do...

I still don't get it. I have the same problem that nickicool has, except that I am using Django. So now basically without the selected attribute properly set, the dropdown which is part of a form is simply broken. When I check the HTTP post request, the posted form value is empty: because the selected attribute is not set. Not cool.

[nickicool]

To solve this problem, I use the Symfony bundle tetranz/select2entity-bundle. If you are also working with PHP on Symfony 4 - it is will help you. How it works - I don't know-some kind of trick is used. The selected attribute is still not added to option tags. But everything works correctly.

[beefydog]

I still don't get it. I have the same problem that nickicool has, except that I am using Django. So now basically without the selected attribute properly set, the dropdown which is part of a form is simply broken. When I check the HTTP post request, the posted form value is empty: because the selected attribute is not set. Not cool.

Even when it is set programmatically via, jquery or javascript setAttribute, postback values are ALWAYS empty. Been driving me crazy too!