FAQ Database Discussion Community


Simple example to set initial value of select2 element with Ajax source?

javascript,jquery,ajax,jquery-select2,jquery-select2-4
I am trying to set the initial value of a Select2 element that is hooked up to an Ajax data source. I am using v4 of Select2, and following the docs, which explain that initSelection has been replaced. I have begun by trying to adapt the example in the "Loading...

Select2: Add and select manual values when using ajax data source

jquery,jquery-select2,jquery-select2-4
I want to achieve following scenario with select2(4.0.0) and jquery(2.1.4): I have a select box which takes data from external source (end point on java application server) User can either pick one of the returned values or come up with his own value Now when user submits the form and...

How to get jquery-select2 to display html entities correctly?

jquery,jquery-select2,jquery-select2-4
I'm using jquery-select2 4.0.0 and I want to display a text containing an '&'. This is the code of the option: <option value="123"> 123 - This & That </option> However, Select2 shows the following as the option text: 123 - This &amp; That How can I get Select2 to show...

Reading HTML5 Data- Attributes from Select2 4.0

jquery,jquery-select2-4
I have a select defined this way: <select class="myselect"> <option value="AL" data-foo="bar">Alabama</option> ... <option value="WY" data-foo="biz">Wyoming</option> </select> In earlier versions of Select2 I can easily retrieve the data- values like this: alert($("#" + controlid).select2().find(":selected").data('foo')); This however, doesnt work in Select 2 4.0 Any ideas or suggestions ?...

Select2 Load On Demand Dropdown set selected value in Jquery

jquery,jquery-select2-4
I am using Load On Demand Dropdown in Select2. I need to set the dropdown value selected using jquery. I was trying the below code but It doesnt seems to be working. Anybody have any idea about how to achieve this. Code $("#ddl").select2("data", { id: 1, text: "India" }); ...

Select2 clear 'x' button to set default value?

jquery-select2,jquery-select2-4
Is it possible that pressing "x" button on Select2 dropdown with allowClear enabled set default (predefined) value?

Select2 v4 in jqGrid edit modal window issue

twitter-bootstrap,jqgrid,jquery-select2-4
I know issue with jQueryUI modal window and Select2. I'm using this fix https://github.com/select2/select2/issues/1246#issuecomment-71710835. But currently I'm trying to integrate Select2 with jqGrid and its edit modal window and I noticed that input field loosing focus on keydown and no text is entered. I'm using latest build of Select2 v4.0.0....

Select2: Why does a preselected OPTION tag show only a cross, without the text?

jquery-select2,jquery-select2-4
I'm making a SELECT like this: <select class="select form-control js-example-basic-multiple" multiple="multiple" id="id_tags" name="tags"> {% for tag in photo.tags.all %} <option selected value="http://localhost:8001/api/tags/{{ tag.id }}/">{{ tag.name }}</option> {% endfor %} </select> I then fire up my select2 instance: $(".js-example-basic-multiple").select2({ multiple : true, ajax : { ..... } }); And I see...

Select2 issue with multiple values

php,jquery,json,jquery-select2-4
I have a webpage that requires to use select2 component. It is required to show selected values on load as well. In my JS file I have two constructs JS - Construct 1 for choose/remove options $("#inp_select_linkproject").select2({ minimumInputLength: 2, maximumSelectionLength: 1, ajax: { type : 'POST', url: '../../ase.php', dataType: 'json',...

Select2 4.0 clicking item doesn't fire select2:select

javascript,jquery,jquery-select2-4
I'm using select2 4.0 and when I load data from a json file none of the created elements fire the select2:select event. I thought it would have something to do with event delegation, but the examples on the website seem to do just fine. I've been breaking my head over...

Select2 4.0 - Push new entry after creation

javascript,jquery-select2,jquery-select2-4
I have been using Select2 4.0.0-rc.1 for a couple of weeks (using the ajax adapter) and I am trying to find a way to "push" data after it has been initialized. Within the dropdown list, I have the choice to select an entry in the list (using ajax) add a...

Select 2 version 4.0 allow user to enter free text

jquery,jquery-select2,jquery-select2-4
I am using the latest version of Select2: Select2 4.0. I would like to allow users to enter free text. In other words if a user cannot find a option in the drop down (data returned by ajax), I want them to be able to 'select' whatever text they have...

Select2 4.0.0 initial value with Ajax

jquery-select2-4
I have a select2 v4.0.0 being populated from an Ajax array. If I set the val of the select2 I can see via javascript debugging that it has selected the correct item (#3 in my case), however this is not shown in the select box, it is still showing the...

Styling jQuery Validation with Select2 4.0 and Bootstrap 3+

jquery,css,twitter-bootstrap-3,jquery-validate,jquery-select2-4
I have a project that uses Bootstrap 3.3.4, Select2 4.0, and Jquery Validation 1.13.1 I have set the jquery validator defaults to style bootstrap 3 classes like so $.validator.setDefaults({ errorElement: "span", errorClass: "help-block", highlight: function (element, errorClass, validClass) { $(element).addClass(errorClass); $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, unhighlight: function (element, errorClass, validClass) { $(element).removeClass(errorClass);...

jquery select2 (4.0) ajax with templateResult and templateSelection

javascript,jquery,ajax,jquery-select2,jquery-select2-4
My Select2 was working on 3.5 correctly.. Since upgrading to v4.0 (not "full" - and changing keywords/functions as needed), I have a weird problem where there are extra AJAX calls being made. However, the URL is not defined, so they generate 404 Not Found errors. The URL is https://localhost:8443/myapp/undefined They...

Select2 4.0 initial value in ajax mode

jquery,ajax,jquery-select2-4
I have the following select on my page: <select><option value="1" selected="selected">Caption</option></select> I call select2 (v 4.0) init: city.select2({ ajax: { url: <...>, data: <...>, processResults: <...>, cache: true }, escapeMarkup: function(markup){ return markup; }, minimumInputLength: 0, templateResult: function(repo){ return repo.name; }, templateSelection: function(repo){ return repo.name; } }); The problem is...

select2 4.0 - always add option to remote data results

jquery-select2-4
I am giving the 3.5 -> 4.0 upgrade another go and 'almost' have this use case working like it was. What I am stuck on now is how to ALWAYS add a certain option to the ajax results list. Here is what I have right now : html: <select id="vedit-filter"...