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

Question

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

我的下拉列表的第二个下拉列表运行正常，但是第三个下拉列表不起作用。 我的第3个下拉列表中有什么问题？ 这是我对控制器的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> 

这是控制器的代码，该控制器从db获取数据并填充下拉列表。

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

假设您的查询正在运行，那么您将使用第二种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不匹配。 那可能就是原因。