select2 changing items dynamically

by

I’ve made an example for you showing how this could be done.

Notice the js but also that I changed #value into an input element

<input id="value" type="hidden" style="width:300px"/>

and that I am triggering the change event for getting the initial values

$('#attribute').select2().on('change', function() {
    $('#value').select2({data:data[$(this).val()]});
}).trigger('change');

Code Example

Edit:

In the current version of select2 the class attribute is being transferred from the hidden input into the root element created by select2, even the select2-offscreen class which positions the element way outside the page limits.

To fix this problem all that’s needed is to add removeClass('select2-offscreen') before applying select2 a second time on the same element.

$('#attribute').select2().on('change', function() {
    $('#value').removeClass('select2-offscreen').select2({data:data[$(this).val()]});
}).trigger('change');

I’ve added a new Code Example to address this issue.

More Related Contents:

  1. How to set selected value of jQuery Select2?
  2. How to use Select2 with JSON via Ajax request?
  3. “query function not defined for Select2 undefined error”
  4. Attach click-event to element in .select2-result
  5. Cloned Select2 is not responding
  6. Clear dropdown using jQuery Select2
  7. ToolTip is not closing with Select2
  8. Select2() is not a function
  9. ECMAScript 6 arrow function that returns an object
  10. How can I use multiple refs for an array of elements with hooks?
  11. Uncaught SyntaxError: Unexpected token :
  12. Refresh Part of Page (div)
  13. How to loop through selected elements with document.querySelectorAll
  14. Refresh Page and Keep Scroll Position
  15. Difference between jQuery `click`, `bind`, `live`, `delegate`, `trigger` and `on` functions (with an example)?
  16. How to invoke Objective-C method from Javascript and send back data to Javascript in iOS?
  17. Uncaught TypeError: Cannot read property ‘msie’ of undefined – jQuery tools
  18. How to get element in user-agent shadow root with JavaScript?
  19. setTimeout() is not waiting [duplicate]
  20. Use JSONP to load an html page
  21. How to check if DOM is ready without a framework?
  22. Getting unique ClientID from chrome extension?
  23. Move mouse pointer in JavaScript
  24. How to prevent re-rendering of components that have not changed?
  25. Can I have two JavaScript onclick events in one element?
  26. Google Maps API v3.19 Broken in Internet Explorer Quirks Mode
  27. In a Chrome Extension content script, must I wait for document.ready before processing the document?
  28. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
  29. React: ‘Redirect’ is not exported from ‘react-router-dom’
  30. What’s the purpose of a leading pipe when declaring a type on Typescript

Leave a Comment