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

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>