populating a second select box after selecting a first select box value - php

Question

I need to select second select box value only after selecting the first select box.I want to insert these values into database.. My view page is below.
<div class="form-group">
<label for="" class="control-label col-xs-2">Country</label>
<div class="col-md-6">
<select class="form-control" id="edu" onChange="EduBackgrd()" name="country">
<option value="">Select</option>
<option value='India'>India</option>
<option value='United States'>United States</option>
<option value='United Kingdom'>United Kingdom</option>
<option value='Canada'>Canada</option>
<option value='Singapore'>Singapore</option>
<option value='Others'>Others</option>
</select>
</div>
</div>
<div class="form-group">
<label for="" class="control-label col-xs-2">Location</label>
<div class="col-md-6">
<select class="form-control" id="edct" name="location">
<option value="">Select</option>
<script>
var eduBak = {};
eduBak['India'] = ['Delhi', 'Mumbai', 'Chennai', 'Kolkata', 'Bangalore', 'Hyderabade', 'Pune'];
eduBak['United States'] = ['Alabama', 'Alaska', 'Arizona'];
eduBak['United Kingdom'] = ['England', 'Northrn Ireland', 'Scotland', 'Wales', 'other'];
eduBak['Canada'] = ['Alberta ', 'Brirish Columbia', 'Manitoba', 'others'];
eduBak['Singapore'] = ['Singapore','others'];
eduBak['Others'] = ['Others']
function EduBackgrd() {
var edu = document.getElementById("edu");
var model = document.getElementById("edct");
var educ = edu.options[edu.selectedIndex].value;
while (model.options.length) {
model.remove(0);
}
var ed = eduBak[educ];
if (ed) {
var i;
for (i = 0; i < ed.length; i++) {
var e = new Option(ed[i], i);
model.options.add(e);
}
}
}
</script>
</select>
</div>
</div>
To insert into database I tried my model as:
public function insert()
{
$data=array(
'Country'=>$this->input->post('country'),
'Location'=>$this->input->post('location'),
);
$this->db->insert('tbl_employer', $data);
}
I'm getting a number while inserting.. I don't know how to set value attribute in the script which I had written for selecting the second select box..How could I fix this problem?

Answer 1

You need to use $.ajax() for this like,
$(function(){
$('#edu').on('change',function(){
$.ajax({
url:'php-page.php', // php page to get options
data:{q:this.value},// passing the value
success:function(data){
$('#edct').html(data);//append options
}
})
});
});
Your php-page.php should look like,
<?php
$eduBak=array();
$eduBak['India'] = ['Delhi', 'Mumbai', 'Chennai', 'Kolkata', 'Bangalore', 'Hyderabade', 'Pune'];
$eduBak['United States'] = ['Alabama', 'Alaska', 'Arizona'];
$eduBak['United Kingdom'] = ['England', 'Northrn Ireland', 'Scotland', 'Wales', 'other'];
$eduBak['Canada'] = ['Alberta ', 'Brirish Columbia', 'Manitoba', 'others'];
$eduBak['Singapore'] = ['Singapore','others'];
$eduBak['Others'] = ['Others'];
$q=isset($_REQUEST['q']) ? $_REQUEST['q'] : '';
$str='';
if($q){
$arr=$eduBak[$q];
if(!empty($arr)){
foreach($arr as $val){
$str.='<option value="'.$val.'">'.$val.'</option>';
}
}
}
echo $str;
exit;
?>
UPDATE: Below is the example of without using PHP
var eduBak = {};
eduBak['India'] = ['Delhi', 'Mumbai', 'Chennai', 'Kolkata', 'Bangalore', 'Hyderabade', 'Pune'];
eduBak['United States'] = ['Alabama', 'Alaska', 'Arizona'];
eduBak['United Kingdom'] = ['England', 'Northrn Ireland', 'Scotland', 'Wales', 'other'];
eduBak['Canada'] = ['Alberta ', 'Brirish Columbia', 'Manitoba', 'others'];
eduBak['Singapore'] = ['Singapore', 'others'];
eduBak['Others'] = ['Others']
$('#edu').on('change',function() {
var edu = document.getElementById("edu");
var model = document.getElementById("edct");
var educ = edu.value;
while (model.options.length) {
model.remove(0);
}
var ed = eduBak[educ];
if (ed) {
var i;
for (i = 0; i < ed.length; i++) {
var e = new Option(ed[i], ed[i]);
model.options.add(e);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="" class="control-label col-xs-2">Country</label>
<div class="col-md-6">
<select class="form-control" id="edu" name="country">
<option value="">Select</option>
<option value='India'>India</option>
<option value='United States'>United States</option>
<option value='United Kingdom'>United Kingdom</option>
<option value='Canada'>Canada</option>
<option value='Singapore'>Singapore</option>
<option value='Others'>Others</option>
</select>
</div>
</div>
<div class="form-group">
<label for="" class="control-label col-xs-2">Location</label>
<div class="col-md-6">
<select class="form-control" id="edct" name="location">
<option value="">Select</option>
</select>
</div>
</div>