Set select2 value as soon as page loads

Question

I know this has been asked several times before, but I've literally been going through solutions for 4 hours and couldn't find the solution for my specific problem.

I've got a select2 select field on an Laravel blade edit view and I would like to set it's value to the data passed to the view. Passing data to the view already happens, and using the select field is no problem either, it works perfectly fine. But every single try I've been going for failed to set it. I've been messing around with a button to set the select field's value, but every modification of

$("select[name=customer]").val("1");

has failed to do this. It always transfers "?id=null". I would appreciate someone setting light on this, as I can't really continue without this. I am adding the important code parts below, if you need anything more, just reply. Thanks in advance!

Select HTML:

<label>*Customer</label>
<select class="form-control" name="customer" id="customer" style="width: 100%">
     <option></option>
</select>

Select2:

$("select[name=customer]").select2({
    allowClear : true,
    placeholder : "Choose customer",
    ajax : {
        url : "/search/autocomplete/get_customers",
        dataType : 'json',
        type : "GET",
        quietMillis : 50,
        delay : 250,
        data : function(params) {
            return {
                filter : params.term
            };
        },
        processResults : function(data) {
            return {
                results : $.map(data, function(item) {
                    return {
                        text : item.name + ' (' + item.customer_code + ')',
                        id : item.id
                    }
                })
            };
        },
        initSelection : function (element, callback) {
              var data = [];
              $(element.val()).each(function () {
                data.push({id: this, text: this});
              });
              callback(data);
        }
    }
});

Button:

<button type="button" onclick="test()">Test</button>

Function test():

function test() {        
    $("select[name=customer]").val("1");
};

I have been trying several alterations of this, examples:

$("select[name=customer]").val("1");
$("select[name=customer]").val("1").change();
$("select[name=customer]").val("1").trigger("change");
$("select[name=customer]").select2("val", "1");

with the list continuing.

If I didn't provide important stuff, message me or replay please!

Best regards

Nick

oshell oshell · Accepted Answer · 2015-07-30T08:02:02

First you should check if the selector is correct by using console.log();. This time use single quotes for the attribute name. select[name='customer']

 var select = $("select[name='customer']");
 console.log(select.length);

If it delivers 0 the selector is wrong. If you have problems with complex css selectors you should probably just use ID's instead.

If jquery selectors are correct but the error occurs, it is most likely because you get the values via ajax and do not wait for the callback/success. Make use of jQuery's ajax success functionality.

$.ajax({
    url: '...',
    success: function(response) {
        test();
    }
});

You could try something like this.

$("select[name=customer]").select2({
    allowClear : true,
    placeholder : "Choose customer",
    ajax : {
        url : "/search/autocomplete/get_customers",
        dataType : 'json',
        type : "GET",
        quietMillis : 50,
        delay : 250,
        success: function(){
            test();
        },
        data : function(params) {
            return {
                filter : params.term
            };
        },
        processResults : function(data) {
            return {
                results : $.map(data, function(item) {
                    return {
                        text : item.name + ' (' + item.customer_code + ')',
                        id : item.id
                    }
                })
            };
        },
        initSelection : function (element, callback) {
              var data = [];
              $(element.val()).each(function () {
                data.push({id: this, text: this});
              });
              callback(data);
        }
    }
});

Set select2 value as soon as page loads

1 Answers