# How to use Select2 plugin in cakephp 3?

**URL:** <https://discourse.cakephp.org/t/how-to-use-select2-plugin-in-cakephp-3/1724>\
**Category:** Plugins\
**Created:** [December 13, 2016, 8:41am UTC](https://discourse.cakephp.org/t/how-to-use-select2-plugin-in-cakephp-3/1724 "2016-12-13T08:41:57Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![SATHISH](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@SATHISH](https://discourse.cakephp.org/u/SATHISH)\
**Post date:** [December 13, 2016, 8:41am UTC](https://discourse.cakephp.org/t/how-to-use-select2-plugin-in-cakephp-3/1724/1 "2016-12-13T08:41:57Z")

</div>

$(“input.country-id”).addClass(‘select2-offscreen’).removeAttr(‘style’);  
$(".state-id").select2({  
allowClear: true,  
ajax: {// instead of writing the function to execute the request we use Select2’s convenient helper  
url: function (term, page) {  
var country\_id=$(“input.country-id”).val();  
[//console.log](https://console.log)(address\_root);  
var url = address\_root + “cities/states.json?fields=id,title&page=” + page + “&title=” + term;  
url += “&country\_id=”+country\_id;  
// var url = address\_root + “…/cities/states.json?fields=id,title&page=” + page + “&title=” + term+"&country\_id=1";  
return url;  
},  
dataType: ‘json’,  
cache: true,  
results: function (result, page) {  
var out = new Array;  
$(result.data).each(function (i, element) {  
out.push({  
‘id’: [element.id](http://element.id),  
‘text’: element.location\_name  
});  
});  
return {  
results: out,  
// more: (result.pagination.has\_next\_page == true)  
};  
}  
},  
escapeMarkup: function (markup) {  
return markup;  
},  
initSelection: function (element, callback) {

```
        var id = $(element).val();

        if (id !== "") {
            var url = address_root + "cities.json?fields=id,title";
            if (id.indexOf(' ') === -1) {
                url += "&id=" + id;

            } else {
                $.each(id.split(' '), function (i, val) {
                    url += "&id[]=" + val;
                });
            }
            $.ajax(url, {
                data: '',
                dataType: "json",
                cache: true
            }).done(function (result) {
                var out = new Array;
                 //console.log(result.data);
                $(result.data).each(function (i, element) {
                    out.push({
                        'id': element.id,
                        'text': element.location_name
                    });
                });
                 // console.log(out);
                if (id > 0) {
                    callback(out[0]);
                } else {
                    callback(out);
                }
            });
        }
    }
});
```