Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setting selected attribute on options for multiple/remote selects #3366

Closed
andrewtweber opened this issue May 16, 2015 · 9 comments
Closed

Setting selected attribute on options for multiple/remote selects #3366

andrewtweber opened this issue May 16, 2015 · 9 comments

Comments

@andrewtweber
Copy link

@andrewtweber andrewtweber commented May 16, 2015

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?

screen shot 2015-05-16 at 10 48 45

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.

screen shot 2015-05-16 at 10 51 30

@andrewtweber
Copy link
Author

@andrewtweber andrewtweber commented May 16, 2015

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
Copy link
Member

@kevin-brown kevin-brown commented May 16, 2015

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
Copy link
Author

@andrewtweber andrewtweber commented May 18, 2015

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
Copy link
Author

@andrewtweber andrewtweber commented May 21, 2015

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
Copy link

@aa21 aa21 commented Apr 21, 2018

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
Copy link

@nickicool nickicool commented Apr 24, 2018

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...

@Fogetti
Copy link

@Fogetti Fogetti commented Aug 6, 2018

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
Copy link

@nickicool nickicool commented Aug 6, 2018

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
Copy link

@beefydog beefydog commented Nov 18, 2019

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants
You can’t perform that action at this time.