使用jquery、ajax和codeigner的链式选择器动态下拉框


chain selector dynamic drop down box using jquery, ajax and codeigniter

我正在尝试创建一个具有3个不同选择框的表单。第一个选择框值通过数据库直接填充,第二个和第三个选择框使用ajax填充;基于先前选择的值。这是我的视图表单代码。

我的下拉批次的第二次下拉效果很好,但第三次下拉不起作用。我的第三次降落有什么问题。这是我向控制器发出的ajax请求。下面是我的表单视图代码。

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

这是控制器的代码,它从数据库中获取数据并填充下拉列表。

 ///// **** 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>'; 
}
}

假设您的查询正在工作,则在第二个jQuery方法中有

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

而你在html 中的第三次选择

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

此处的ids #section_result_holder#section_selection_holder不匹配。这可能就是原因。