使用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不匹配。 那可能就是原因。