使用jQuery，Ajax和Codeigniter的链选择器动态下拉框

Question

i am trying to create an form with 3 different select box. first select box value is directly populated through database,2nd and 3rd select box is populated using ajax; based on previously selected values. here is my view form code.

My second drop down for pull down batchs is working perfectly but the 3rd drop down is no working. what is the problem inside my 3rd drop down. this is my ajax request to controller. and below this there is my form view code.

 <script> function get_program_batchs(program_id) { $.ajax({ url: '<?php echo base_url();?>index.php?admin/get_program_batchs/' + program_id , success: function(response) { jQuery('#batch_result_holder').html(response); } }); } function get_batchs_section(batch_result_holder){ $.ajax({ url: '<?php echo base_url();?>index.php?admin/get_batch_sections/' + batch_result_holder , success: function(response) { jQuery('#section_result_holder').html(response); } }); } </script> 

 <div class="form-group"> <span><?php echo get_phrase('select_program'); ?></span> <select onchange="return get_program_batchs(this.value)" data-plugin="select2" id="program_id" name="program_id" required=""> <option disabled selected value=""> <?php echo get_phrase('select_programs'); ?></option> <?php $programs = $this->db->get('programs')->result_array(); foreach($programs as $row2): ?> <option value="<?php echo $row2['program_id'];?>"> <?php echo $row2['name'];?> </option> <?php endforeach; ?> </select> </div> <div class="form-group"> <span><?php echo get_phrase('select_batch'); ?></span> <select name="batch_result_holder" id="batch_result_holder" onchange="return get_batchs_section(this.value)" data-plugin="select2" required> <option disabled selected value=""> <?php echo get_phrase('select_programs_first'); ?> </option> </select> </div> <div class="form-group"> <span><?php echo get_phrase('select_section'); ?></span> <select name="section_id" id="section_selection_holder" data-plugin="select2" > <option disabled selected> <?php echo get_phrase('select_programs_first'); ?></option> </select> </div> 

and this is the code of controller which fetch data from db and populate the drop downs.

  ///// **** ADD FORM DYNAMIC VALUE /////// function get_program_batch($program_id) { $batchs = $this->db->get_where('batch' , array( 'program_id' => $program_id ))->result_array(); foreach ($batchs as $row) { echo '<option value="' . $row['batch_id'] . '">' . $row['batch_name'] . '</option>'; } } function get_batch_sections($batch_result_holder) { $sections = $this->db->get_where('section' , array( 'batch_id' => $batch_result_holder ))->result_array(); foreach ($sections as $row) { echo '<option value="' . $row['section_id'] . '">' . $row['name'] . '</option>'; } } 

Answer 1

Assuming that your query is working, you have in your second jQuery method

jQuery('#section_result_holder').html(response);

whereas you have in your third select in html

<select name="section_id" id="section_selection_holder" data-plugin="select2" >

The ids #section_result_holder and #section_selection_holder here do not match. That might be the reason.