{"id":15537,"date":"2020-06-29T13:59:07","date_gmt":"2020-06-29T13:59:07","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=15537"},"modified":"2021-10-30T10:24:34","modified_gmt":"2021-10-30T10:24:34","slug":"how-to-show-city-list-as-per-country-and-state-select-in-dropdown-using-ajax-in-laravel-part-2","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-show-city-list-as-per-country-and-state-select-in-dropdown-using-ajax-in-laravel-part-2\/","title":{"rendered":"How to show City List as per Country and State select in DropDown using AJAX in Laravel? Part-2"},"content":{"rendered":"\n

How to use AJAX in DropDown in Laravel? Example as in Country, State, and City.<\/p>\n\n\n\n

To Click Part-1<\/a> of its first blog. Now, we’ll start the next part of this.<\/p>\n\n\n\n

Inserting data into Country, State and City tables<\/strong><\/span><\/p>\n\n\n\n

Step 15.<\/strong> We can insert data into tables through CRUD<\/a> functions or directly by Database. Here, we go direct to insert data into tables. Go to http:\/\/localhost\/phpmyadmin<\/strong> -> Click <\/strong>your created database country_state_city<\/strong> ->Click<\/strong> countries table<\/strong> ->Click Insert<\/strong>. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 16.<\/strong> As well, we have to insert data into states and cities tables. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Step 17.<\/strong> Go<\/strong> to resources\/views\/welcome.blade.php<\/strong> file and give a link. Laravel provides a helper function, asset(), which generates a URL to application assets(CSS\/JavaScript\/images files<\/strong>).<\/p>\n\n\n

{{asset('css\/app.css'<\/span>)}}  <\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Step 18.<\/strong> As well, we have to generate url js file by asset() function. Go to  Download the compressed, production jQuery 3.5.1<\/a> right-click the link, copy all and paste within public\/js<\/strong> folder->create jquery.js file.<\/p>\n\n\n
<script<\/span> src<\/span>=\"{{asset('js\/jquery.js')}}\"<\/span>><\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Step 19.<\/strong> Write logic of DropDown selection using AJAX for Country within welcome.blade.php file<\/p>\n\n\n
<script<\/span>><\/span>\n           $(document<\/span>).ready(function<\/span>(<\/span>)<\/span>{\n            $('select[name=\"country\"]'<\/span>).on('change'<\/span>,function<\/span>(<\/span>)<\/span>{\n                var<\/span> country_id= $(this<\/span>).val();\n                if<\/span> (country_id) {\n                 $.ajax({\n                    url<\/span>: \"{{url('\/getStates\/')}}\/\"<\/span>+country_id,\n                  type<\/span>: \"GET\"<\/span>,\n                  dataType<\/span>: \"json\"<\/span>,\n                  success<\/span>: function<\/span>(data<\/span>)<\/span>{\n                    console<\/span>.log(data);\n                    $('select[name=\"state\"]'<\/span>).empty();\n                    $.each(data,function<\/span>(key,value<\/span>)<\/span>{\n                        $('select[name=\"state\"]'<\/span>).append('<option value=\"'<\/span>+key+'\">'<\/span>+value+'<\/option>'<\/span>);\n\n                    });\n                  }\n                 });\n                }else<\/span> {\n                     $('select[name=\"state\"]'<\/span>).empty();\n               }\n           });\n             \n           });\n       <\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Step 20.<\/strong> Similarly, write logic of DropDown selection using AJAX for State.<\/p>\n\n\n\n
Here’s the full code<\/strong>.<\/p>\n\n\n\n