{"id":15439,"date":"2020-06-27T07:15:19","date_gmt":"2020-06-27T07:15:19","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=15439"},"modified":"2021-10-30T10:32:59","modified_gmt":"2021-10-30T10:32:59","slug":"how-to-show-city-list-as-per-country-and-state-select-in-dropdown-using-ajax-in-laravel-part-1","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-1\/","title":{"rendered":"How to show City List as per Country and State select in DropDown using AJAX in Laravel? Part-1"},"content":{"rendered":"\n

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

What is the DropDown?<\/p>\n\n\n\n

Create a dropdown box that appears when the user moves the mouse over an element. <\/em><\/p>\n\n\n\n

To know more https:\/\/www.w3schools.com\/css\/css_dropdowns.asp<\/a>.<\/p>\n\n\n\n

Step 1.<\/strong> We need to Create<\/strong> a Database<\/strong> for this and Go <\/strong>to XAMPP server->phpMyAdmin->Click New Database-> country_state_city.<\/strong><\/p>\n\n\n\n

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

Step 2.<\/strong> To Create<\/strong> a new project, so open<\/strong> xampp\/htdocs<\/strong> folder->Right Click<\/strong>-> Open GitBash<\/strong> -> Write following Command:-<\/p>\n\n\n

$ composer create-project --prefer-dist laravel\/laravel country_sate_city \"5.8.*\"<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Mysql Database connection Laravel<\/span><\/strong><\/p>\n\n\n\n
Step 3.<\/strong> Thereafter, Go<\/strong> to .env file<\/strong> to set the project path and give the project DB_DATABASE name<\/strong> and DB_USERNAME name.<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Step 4. <\/strong>Now, Go<\/strong> to config\/database.php<\/strong> give the project DB_DATABASE name<\/strong> and DB_USERNAME name<\/strong>.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Step 5.<\/strong> To Create<\/strong> the first model for creating a table, Write<\/strong> the following command.<\/p>\n\n\n
$ php artisan make:model Country -m\n<\/code><\/span><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Step 6. <\/strong>Similarly, To Create a <\/strong>second model for creating a table, Write<\/strong> the following command.<\/p>\n\n\n
$ php artisan make:model State -m<\/code><\/span><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Step 7.<\/strong> Likewise, To Create<\/strong> the third model for creating a table, Write<\/strong> the following command:<\/p>\n\n\n
$ php artisan make:model City -m<\/code><\/span><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Step 8.<\/strong> To Generate<\/strong> a migration file in the database\/migrations<\/strong> folder of Country<\/strong> table.<\/p>\n\n\n
public<\/span> function<\/span> up<\/span>()<\/span>\n    <\/span>{\n        Schema::create('countries'<\/span>, function<\/span> (Blueprint $table)<\/span> <\/span>{\n            $table->bigIncrements('id'<\/span>);\n            $table->string('country_name'<\/span>);\n            $table->timestamps();\n        });\n    }<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Step 9.<\/strong> To Generate<\/strong> a migration file in the database\/migrations<\/strong> folder of State <\/strong>table.<\/p>\n\n\n
 public<\/span> function<\/span> up<\/span>()<\/span>\n    <\/span>{\n        Schema::create('states'<\/span>, function<\/span> (Blueprint $table)<\/span> <\/span>{\n            $table->bigIncrements('id'<\/span>);\n            $table->string('state_name'<\/span>);\n            $table->integer('country_id'<\/span>);\n            $table->timestamps();\n        });\n    }<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Step 10.<\/strong> To Generate<\/strong> migration file in the database\/migrations<\/strong> folder of the C<\/strong>ity table.<\/p>\n\n\n
public<\/span> function<\/span> up<\/span>()<\/span>\n    <\/span>{\n        Schema::create('cities'<\/span>, function<\/span> (Blueprint $table)<\/span> <\/span>{\n            $table->bigIncrements('id'<\/span>);\n            $table->string('city_name'<\/span>);\n            $table->integer('state_id'<\/span>);\n            $table->timestamps();\n        });\n    }<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Step 11. <\/strong>To migrate<\/strong> these tables into the MySQL database, so write the following command.<\/p>\n\n\n
$ php artisan migrate\n<\/code><\/span><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Step 12.<\/strong>  To Create<\/strong> a Controller<\/strong> in App\/Http\/Controller<\/strong> folder so, write the following command.<\/p>\n\n\n
$ php artisan make:controller MainController --resource<\/code><\/span><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Step 13.<\/strong>  So, Go to the app\/Http\/Controllers\/MainController.php<\/strong> file and write the following codes within the index(), getStates(), <\/strong>and getCities() <\/strong>functions.<\/p>\n\n\n
public<\/span> function<\/span> index<\/span>()<\/span><\/span>{\n    \t$countries = Country::all()->pluck('country_name'<\/span>,'id'<\/span>);\n    \treturn<\/span> view('welcome'<\/span>,compact('countries'<\/span>));\n    }<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n
 public<\/span> function<\/span> getStates<\/span>($id)<\/span><\/span>{\n    \t$states= State::where('country_id'<\/span>,$id)->pluck('state_name'<\/span>,'id'<\/span>);\n        return<\/span> json_encode($states);\n    }<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n
public<\/span> function<\/span> getCities<\/span>($id)<\/span><\/span>{\n    \t$cities= City::where('state_id'<\/span>,$id)->pluck('city_name'<\/span>,'id'<\/span>);\n        return<\/span> json_encode($cities);\n    }<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n