Note this was tested with version 4+ I was finally able to make progress after finding this discussion: https://groups.google.com/forum/#!topic/select2/TOh3T0yqYr4 The last comment notes a method that I was able to use successfully. Example: $(“#selectelement”).select2(“trigger”, “select”, { data: { id: “5” } }); This seems to be enough information for it to match the ajax data, … Read more
What you are seeing is actually a multi-select or multi-value drop down box in that example. It is not a single value drop down box like you are using in your code. Per the Select2 website, select2 will detect that you are trying to use a multi-select box and will automatically apply that styling instead … Read more
I do a similar thing, however I hide the select2 container which is always the next node over from the start point so it would look like. $(document).on(‘change’, ‘.country’, function () { if ($(this).val() == $(this).data(‘current-countryCode’)) { $(‘#states’).next(“.select2-container”).show(); } else { $(‘#states’).next(“.select2-container”).hide(); } }); So I have been taking the same approach you have
You can run select2 in this way: import $ from ‘jquery’; import ‘select2’; // globally assign select2 fn to $ element import ‘select2/dist/css/select2.css’; // optional if you have css loader $(() => { $(‘.select2-enable’).select2(); });
jQuery uses JSON objects to initialize, so I guess this one will as well:\ $(“#myBox”).select2({ containerCssClass : “error” }); If you want to add/remove a class you can do this after you initialized it $($(“#myBox”).select2(“container”)).addClass(“error”); $($(“#myBox”).select2(“container”)).removeClass(“error”); The above function gets the DOM node of the main container of select2 e.g.: $(“#myBox”).select2(“container”) Important You will need … Read more
You need to use the initSelection option to set the initial value. If you are using a pre-defined select element to create the select2, you can use the following method $(‘select’).select2().select2(‘val’,’3′) Demo: Fiddle
As stated in the doc, allowClear needs a placeholder and placeholder need a corresponding option value (which cannot be an empty string, but can be a single space). allowClear This option only works when the placeholder is specified. — placeholder Note that because browsers assume the first option element is selected in non-multi-value select boxes … Read more
Part #1 of Q: You can do a CSS trick to hide selected item like this: .select2-results__option[aria-selected=true] { display: none; } Part #2 of Q: Also you can do a JQuery trick to force selected items to end of tags box, ( by getting selected item on select, detach it (remove it), then reAppend it … Read more
Select2 includes ‘dropdownAutoWidth’ parameter which uses javascript to attempt to be wide enough for the dropdown contents. $(‘#whatever’).select2({dropdownAutoWidth : true}); This at least works with Select2 3.4.3 – I don’t know how much earlier it was introduced.
According to the Select2 documentation: $(‘#id’).select2(‘open’); Should be all you need. Found under the Programmatic Access section in the documentation.