Select2 doesn't work with multiple <select> with same id #5501
Comments
|
Yes, Same issue is there in the example website with me also. May this issue/bug is only with the latest(v4.0.6). Earlier is working great. |
Bingo. We officially do not support this use case because it breaks a lot of the way we need to generate internal IDs. With that being said, if you are able to trace through the differences between 4.0.5 and 4.0.6, I'm willing to entertain a pull request that fixes this as long as it doesn't break anything else. |
|
Hmm. In my case I'm not using multiple same/unique id attribute. Still ajax(remote data) thing not working correctly. Check example data on your website. select box is not closing after option selection. Even this is not with Ajax part most of yours examples in each section not working as above mentioned. Its also described in Issue #5500 |
|
@vinaychetu that issue is different from the one reported here. That issue is captured and fixed in #5490. This issue is still present in 4.0.7-rc.0. |
|
I have a similar problem with v4.0.6 or above. Even when the element is given a different ID, if the Here is an example. <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/4.0.6/dist/css/select2.min.css" rel="stylesheet">
<script src="https://rawgit.com/select2/select2/4.0.6/dist/js/select2.full.min.js"></script>
<style>
#container > div {
margin: 2em;
}
</style>
</head>
<body>
<h1>Clone Element Test</h1>
<div id='container'>
<h2>Original</h2>
<select id="test-clone-select-01">
<option>January</option>
<option>February</option>
<option>March</option>
</select>
</div>
</body>
<script>
$( document ).ready( function(){
var options = {};
$( '#test-clone-select-01' ).select2( options );
var target_element = $( '#test-clone-select-01' );
var cloned_element = target_element.clone();
cloned_element.attr( 'id', 'test-clone-select-02' );
// cloned_element.attr( 'data-select2-id', '' );
cloned_element.removeClass( 'select2-hidden-accessible' );
$( '#container' ).append( '<hr><h2>Cloned</h2>' );
$( '#container' ).append( cloned_element );
cloned_element.select2( options );
});
</script>
</html>Change the line A workaround is to remove the |
|
The workaround suggested by @onet4 works better if you also remove the data-select2-id from the child elements. Otherwise the cloned menu remains entangled with the original menu, which is evident from the previously-selected option highlighting being incorrect. |
|
@kevin-brown "Bingo. We officially do not support this use case because it breaks a lot of the way we need to generate internal IDs." |
|
We continue to believe that this was not specified or documented behaviour, since it violates expectations that the
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
This is being fixed in #5587 and is actually a different issue from the one mentioned here. We have fixed the issue that some people were seeing when closing a destroyed Select2 and will be releasing the fix in the next version. |
|
Is it possible to add an error in the console to explains that existing select2 will be destroyed (span select2) to avoid a lot a time consuming research? Because this error will still hapening normaly. |
|
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
|
BTW duplicated Ids are not allowed by HTML:
|
|
Adding to what @rohanc said above. Best is to remove the data-select2-id instead of setting it to blank since multiple elements with blank data-select2-id also don't seem to work with select2. Something like this:
|
Select2 doesn't convert multiple
<select>elements that share sameidattribute (I know thatidattribute must be unique).This used to work just fine in 4.0.5.
Since 4.0.6 it doesn't work anymore and just one element out of many is "upgraded" to select2.
Have tried this on firefox, didn't try other browsers.
Example is here, changing script version to 4.0.5 will make it work fine:
http://jsbin.com/bejobisavo/edit?html,js,output
The text was updated successfully, but these errors were encountered: