Заполнение второго поля выбора после выбора значения первого окна выбора

Question

Мне нужно выбрать второе значение поля выбора только после выбора первого окна выбора. Я хочу вставить эти значения в базу данных. Моя страница просмотра ниже.

<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> 

Для вставки в базу данных, я попробовал свои модели как:

public function insert() 
{ 
$data=array(
'Country'=>$this->input->post('country'), 
     'Location'=>$this->input->post('location'), 
     ); 
$this->db->insert('tbl_employer', $data); 
     } 

Я получаю число, вставляя .. я не знаю, как установить значение атрибута в сценарии, который я имел написанный для выбора второго блока выбора. Как я могу исправить эту проблему?

Answer 1

Вы должны использовать $.ajax() для этого, как,

$(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 
      } 
     }) 
    }); 
}); 

Ваш php-page.php должен выглядеть,

<?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: Ниже приведен пример без использования 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>