Check If Value Select2 Is Null

Check if value select2 is null

This help you :

<html>    <head>    </head>    <body>       <select class="deggre" style="width: 100%">        <option value=""></option>        <option value="Alabama">Alabama</option>        <option value="Wyoming">Wyoming</option>      </select>        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" style="display:none">        <!-- the name of button is the value of what we choose in first select2  -->Alabama          <span class="glyphicon glyphicon-remove"></span>       </button>        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>        <script>            $(document).ready(function(){                $(".deggre").change(function(){                    if($(this).val() == "")                         $('#dropdownMenu1').css({"display": "none"});                    else                         $('#dropdownMenu1').css({"display": "block"});                })            })        </script>     </body></html>

select2 - how to allow a null value

To specify a null value you set the Select2 value to null and the placeholder will appear.

$('select').select2({
    placeholder: 'Your NULL value caption',
    allowClear: true   // Shows an X to allow the user to clear the value.
});

There are/were ways (via a custom data adapter or previous versions) to create a null value entry that users could select. I know because that is what I previously did but that has now changed.

Select2 4.0.3: See: https://select2.org/selections

====================

IMPORTANT EDIT: As of Version 4.0.4 (yesterday) there is a fix that allows selecting options with blank or 0 option values.
See: https://github.com/select2/select2/releases/tag/4.0.4

To enable this you need to add your NULL value and remove the "placeholder" and the "allowClear" options.

If you don't remove the "placeholder" option it will hide your "NULL" entry.

If you leave the "allowClear" then clicking the "X" will cause an error.

jquery select2 multiselect: How can I check if options is selected or not?

You can get the first item in a list with first() method. See documentation, and you can get selected options with :selected selector. See documentation.

Try something like:

$('#select').on('change', function() {
    var first = $(this).find('option').first().val();
    var none = $(this).find('option:selected').length;

    if ($(this).val() == first) {
        alert('First item selected!');
    } else if (none == 0) {
        alert('All items deselected!');
    }
});

change event on select2 always has null value

I found the solution Here

in section: Preselecting options in an remotely-sourced (AJAX) Select2.

For Select2 controls that receive their data from an AJAX source, using .val() will not work. The options won't exist yet, because the AJAX request is not fired until the control is opened and/or the user begins searching....
The best way to deal with this, therefore, is to simply add the preselected item as a new option.

Link has also the js code needed.

Select2 remote data: select value Null

You can clear selected value using:

  $("#DASearchContactId").select2({ allowClear: true,placeholder: "Select a value"  });

property.

Javascript select2 selected value is null on first select

Use jquery .change() to get the value of the selected input.
Then, use .text() to get the textvalue.

<!DOCTYPE html><html>
  <head>    <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>    <script>    $( document ).ready(function() {                $( "#subject_change_select" ).change(function() {        r = $("#subject_change_select option:selected").text();        console.log(r);      });
    });          </script>  </head>
  <body>    <select name="classSelect" class="form-control classSelect select2-hidden-accessible" id="subject_change_select" tabindex="-1" aria-hidden="true">  <option value="5">sdfsdfsfsdf</option>  <option value="6">2</option>  <option value="7" selected="">1</option>  <option value="8">3</option>  <option value="9">4</option></select>  </body>
</html>

Select2 pre populated data value shows null on form submit

I just figured out that I am using select2 v4.0.0 initSelection has been deprecated and replaced with current method, to know more about this check select2 release announcements for version 4.0.0

I solved my problem by updating my script as below

var $element  = $('.select2').select2({
            minimumInputLength: 2,
            "language": {
                "noResults": function(){
                    return "{{Lang::get('lang.no-department-found')}}";
                },
                searching: function() {
                    return "{{Lang::get('lang.searching')}}";
                },
                inputTooShort: function(args) {
                    // args.minimum is the minimum required length
                    // args.input is the user-typed text
                    var remaining = args.minimum - args.input.length;
                    return "{{Lang::get('lang.please-enter')}} "+remaining+" {{Lang::get('lang.or-more-character')}}";
                },
            },
            ajax: {
                url: "{{URL::route('api-get-department-names')}}",
                dataType: 'json',
                delay: 250,
                type: "GET",
                quietMillis: 50,
                data: function (params) {
                    return {
                        name: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                },
                cache: true
            },
        });     
        $('.select2-selection').css('border-radius','0px');
        $('.select2-selection').css('height','33px');
        $('.select2-container').children().css('border-radius','0px');

        var $request = $.ajax({
            url: "{{URL::route('get-canned-shared-departments', $canned->id)}}",
            dataType: 'json',
            type: "GET",
        });

        $request.then(function (data) {
            // This assumes that the data comes back as an array of data objects
            // The idea is that you are using the same callback as the old `initSelection`
            for (var d = 0; d < data.length; d++) {
                var item = data[d];
                // Create the DOM option that is pre-selected by default
                var option = new Option(item.text, item.id, true, true);
                // Append it to the select
                $element.append(option);
            }
            // Update the selected options that are displayed
            $element.trigger('change');
        });

select2 returns null on refresh

I'm not sure how are you returning the data, but I've tried to replicate it below. To achieve the similar structure you'd have to have PHP output like $data[]['value'] and $data[]['text']

$(document).ready(function() {    var qualif = []    qualif.push({"value": 1, "text": "single"});    qualif.push({"value": 2, "text": "double"});        // If you need to populate them too.    /** $.each(qualif, function (index, data) {      $('#qual_id').append($('<option>', { value: data.value, text: data.text }, '<option/>'));    });*/    $('#qual_id').val(qualif.map(a => a.value)).trigger('change');    
    $('#qual_id').select2({        width: 'resolve',        placeholder: "QUALIFICATION",        maximumSelectionLength: 2,    });
});

#qual_id {  width: 200px}

<select name="qual_id[]" id="qual_id"   class="qual_id" multiple="multiple" >    <option value="" ></option>    <option value="1">single</option>    <option value="2">double</option></select>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.js"></script>

Laravel - Set Select2 Default to NULL rather than First Option

From the docs. Make sure that on your select2 options, you set a placeholder:

$('#ship_to').select2({
    placeholder: "Please select a customer"
});

And add an empty option in the <select> (Just above the @foreach($cCustomers as $customer):

<option></option>

Check If Value Select2 Is Null