Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I disable certain options with Select2 and remote data

Select2 supports disabled options when it is initialized on a <select> tag, as discussed in this issue

However, I can't find how to achieve the same result with remote data. Do I need to use a custom format function? How do I prevent the user from selecting it then? Or is this built-in somewhere?

Thanks!

like image 418
Moeri Avatar asked Aug 14 '13 11:08

Moeri


People also ask

How do I add options in Select 2?

New options can be added to a Select2 control programmatically by creating a new Javascript Option object and appending it to the control: var data = { id: 1, text: 'Barn owl' }; var newOption = new Option(data. text, data.id, false, false); $('#mySelect2'). append(newOption).

What is initSelection in Select2?

In the past, Select2 required an option called initSelection that was defined whenever a custom data source was being used, allowing for the initial selection for the component to be determined. This has been replaced by the current method on the data adapter.

How do I render Select2 options in HTML?

The key here for me is to build a data array with content for both templateSelection and templateResult . The latter renders fine in the dropdown but any multiline content will not be contained in the select2 element so needs to be displayed inline (or at least on a single line).


2 Answers

select2 can't change the server data, but you can change options before the result reloaded to the page

  $('.input-selector').select2({
  ajax: {
      url: function (params) {
        return '/to/url/resource.json';
      },
      processResults: function (data) {
        var data_modified = $.map(data.results, function (obj) {
          obj.disabled = true; // or use logical statement
          return obj;
        });

        return { results: data_modified };
      }
    }
  });
like image 89
mirzalazuardi Avatar answered Sep 19 '22 13:09

mirzalazuardi


In Select2 3.4.2 you just need to add a disabled: true property to the given result object. Practical example with a query function:

$('input').select2({
    query: function(query) {
        //do ajax call which retrieves the results array in this format:
        var data = {results: [
            { id: 1, text: 'disabled option', disabled: true },
            { id: 1, text: 'hi' }
        ]};
        //pass it to the query callback inside your Ajax callback:
        query.callback(data);
    }
});

Demo


The same can be done using the ajax wrapper, which accepts a result objects array in the same format as the query function.

Here's a demo with an actual Ajax call (through jsFiddle's JSON API):

$('input').select2({
    ajax: {
        url: '/echo/json/',
        dataType: 'json',
        params: {
            method: 'post'
        },
        data: function (term, page) {
            // Data to be sent to the server. Usually it is just the "term"
            // parameter (and page if using pagination).
            // However, since this API simply echoes back what we send,
            // I'll build the results array here
            var resultsArr = [];
            for (var i = 0; i < 10; i++) {
                resultsArr.push({
                    id: i,
                    text: 'opt'+i,
                    //randomly disable a couple options for demo purposes
                    disabled: Math.random() < .3
                });
            }
            return {
                json: JSON.stringify(resultsArr)
            }
        },
        results: function(data, page) {
            //data param === received response from the server. As dataType
            //is json, jQuery automatically parses the response into an object.
            //So, in this case, we received the resultsArr that we sent.
            //Now return it in the correct format: { results: resultsArr }
            return { results: data };
        }
    }
});

Demo

Remember that the data function in this last example is just to properly use the jsFiddle API - you should keep your original data function which sends the query term. All you have to do is modify the response so that the result objects include a disabled: true property in the results that you want to be disabled, in the same format as the first example.

like image 25
Fabrício Matté Avatar answered Sep 18 '22 13:09

Fabrício Matté