I am using Codeigniter 3.1.1. I want City option to display base on the value selected with State option. Actually the City select option does not populate automatically when State option is selected. I tried to link the latest jQuery but still, it doesn’t work. Your help is highly appreciated.
MyController.php
class HomeController extends CI_Controller { public function __construct() { parent::__construct(); $this->load->database(); } public function index() { $states = $this->db->get("demo_state")->result(); $this->load->view('myform_view', array('states' => $states )); } public function myformAjax($stateID) { $result = $this->db->where("state_id",$stateID)->get("demo_cities")->result(); echo json_encode($result);} }
View:
<select name="state" id="state" class="form-control" style="width:350px"> <option value="">---Select State---</option> <?php foreach($states as $key => $value) { echo "<option value='".$value->id."'>".$value->name."</option>"; } ?> </select> <select name="city" id="city" class="form-control" style="width:350px"></select>
Ajax:
$(document).ready(function() { $('select[name="state"]').on('change', function() { var stateID = $(this).val(); if(stateID) { $.ajax({ url: '/MyController/myformAjax/'+stateID, type: "POST", dataType: "json", success:function(data) { $('select[name="city"]').empty(); $.each(data, function(key, value) { $('select[name="city"]').append('<option value="'+ value.id +'">'+ value.name +'</option>'); }); } }); }else{ $('select[name="city"]').empty(); } }); });
Advertisement
Answer
You’ve not specified what problem you face when you run your code or what is the output or what is the error, so, we’ve no way of knowing what the real issue is. However, I’m sharing a working code (an excerpt from my project) of what you want; I’ve also changed the values according to your needs.
This follows a different approach as
AJAX
expectsHTML
to be returned and thatHTML
is formed inPHP controller
rather than onsuccess
injQuery
and then simply added to the desiredid
.
AJAX
$(document).ready(function() { $('#state').on('change', function() { var stateID = $(this).val(); if(stateID) { $.ajax({ url: '/MyController/myformAjax/'+stateID, // your-controller-path // sometimes relative path might not work try with base_url() instead or configure your .htaccess properly type: "POST", dataType: "html", // expecting html success:function(data) { $('#city').empty(); $('#city').html(data); // change innerHTML of id='city' } }); }else{ $('#city').empty(); // $('#city').html(''); } }); });
Controller
public function myformAjax($stateID) { $cities = $this->db->where("state_id",$stateID)->get("demo_cities")->result(); // get all the cities -- probably want to do this in model $cityOpt = '<option value="">--Select City--</option>'; // first option -- to prevent first option from automatically selecting when submitting data foreach($cities as $city) { $cityOpt .= '<option value="'.$city->id.'">'.$city->city_name.'</option>'; // concatenate the next value } echo $cityOpt; }
See if it helps you.