使用jQuery和CodeIgniter創建組合框和複選框

Question

我有名爲catid的組合框，其中填充了類別。在更改時，我正在填充其他組合框中的內容，並且我在表單中添加了複選框，這些複選框都基於所選類別。

所以按照這個順序總共有三個組合框，類別（＃catid），子類別（＃catid2）和製造商（#manufacturerid） 。

當沒有子類別，一切都很好，順利。在子類別組合框中，我收到消息 沒有子類別，我正在填寫與該類別的製造商的製造商組合框， ，我正在繪製與此類別相關的組合框。

存在子類別時會出現問題。我正在嘗試使用change事件來獲取與該子類別相關的複選框。 我得到未定義的值。

這裏是我的代碼：

控制器：

public function __construct() { 
     parent::__construct(); 
     $this->load->model('addsCategoriesModel'); 
     $this->load->model('addsTypesModel'); 
     $this->load->model('colorsModel'); 
     $this->load->model('geographicAreasModel'); 
     $this->load->model('categoriesFiltersModel'); 
    } 

    // function index has been ommited for the sake of simplicity 

    function get_dropdown_values($catid){ 
     $this->load->model('manufacturersModel'); 
     $this->db->select('manufacturerid,manufacturername'); 
     $this->db->where("catid = $catid"); 
     $result = $this->manufacturersModel->get(); 

     //echo form_dropdown('manufactirerid', $result, NULL, 'id="manufacturerid"'); 
     echo "<select name='manufacturerid' id='manufacturerid' class='styled_select'>"; 
      //"<option value=".$result[]['manufacturerid'].">".$result[]['manufacturername'] 

     foreach ($result as $key=>$value) { 
      echo "<option value=".$key['manufacturerid'].">".$value['manufacturername']."</option>"; 
     } 
     echo "</select>"; 
    } 
     function get_dropdown_values2($catid){ 
     // create the second drop down, where parent id is the selected category 
     $this->db->select('catid,parentid,categoryname'); 
     $this->db->where("parentid = $catid"); 
     $result2 = $this->addsCategoriesModel->get(); 
     if(count($result2) > 0){ 
     echo "<select name='catid2' id='catid2' class='styled_select'>"; 
     foreach ($result2 as $key=>$value) { 
      echo "<option value=".$key['catid'].">".$value['categoryname']."</option>"; 
     } 
     echo "</select>"; 
     } else { 
      echo "<select name='catid2' id='catid2' class='styled_select'>"; 
      echo "<option value='0'>No subcategories</option>"; 
      echo "</select>"; 
     } 
    } 


    function get_categories_filters($catid3){ 

     // create the checkboxes according to selected category 

     // case 1: if the category id is NOT 4 
      $this->db->where("catid = $catid3"); 
      $result3 = $this->categoriesFiltersModel->get(); 
      if(count($result3) > 0){ 
       // start the foreach loop 
       foreach($result3 as $key=>$value){ 
        echo "<div class='chb_group'>"; 
        echo "<span class='custom_chb_wrapper'>"; 
      echo "<input type='checkbox' name=" .$value['filterid'] ." class='zcheckbox'/>"; 
      echo "<label>" .$value['filtername']. "</label>"; 
      echo "</span>"; 
        echo "</div>"; 
       } 
      } else { 
       $result3 = "No checkboxes in this category"; 
       echo $result3; 
       //$this->get_categories_filters2(22); 
      } 
    } 

    function get_categories_filters2($catid4){ 
     // create the checkboxes according to selected category 
     $this->db->where("catid = $catid4"); 
     $result4 = $this->categoriesFiltersModel->get(); 
     if(count($result4) > 0){ 

      // start the foreach loop 
      foreach($result4 as $key=>$value){ 
       echo "<div class='chb_group'>"; 
       echo "<span class='custom_chb_wrapper'>"; 
      echo "<input type='checkbox' name=" .$value['filterid'] ." class='zcheckbox'/>"; 
     echo "<label>" .$value['filtername']. "</label>"; 
     echo "</span>"; 
       echo "</div>"; 
      } 
     } else { 
      //$result4 = "No checkboxes in this category"; 
      $result4 = "Are you in filters2??"; 
      echo $result4; 
     } 
    }  
} 

這是我的觀點：

<select name="catid" id="catid" class="styled_select" onchange="load_dropdown_content($('#manufacturerid'), this.value);load_dropdown_content2($('#catid2'), this.value);load_dropdown_content3($('#catid3'), this.value);"> 

    <option value="0">Please select</option> 
    <?php 
     // foreach loop to fetch the categories 
     foreach ($adds_categories as $category){ 
     echo "<option value=".$category['catid'].">".$category['categoryname']."</option>"; 
     } 
     ?> 

</select> 
</div> 

     <div class="select_wrapper"> 
    <label><strong>Subcategory: </strong></label>              
     <select name="catid2" id="catid2" class="styled_select" onchange="load_dropdown_content4($('#catid3'), this.value);"> 

     <option value="0">Please select</option>     
    </select>        
     </div> 

爲了簡單起見，我不在這裏顯示manufactirer組合框，用我沒有任何問題和複選框

而javascript：

<script type="text/javascript"> 

    function load_dropdown_content(field_dropdown, selected_value){ 
    var result = $.ajax({ 
    'url' : '<?php echo site_url('submit/get_dropdown_values'); ?>/' + selected_value, 
    'async' : false 
    }).responseText; 
    field_dropdown.replaceWith(result); 
    } 

    function load_dropdown_content2(field_dropdown, selected_value){ 
    var result2 = $.ajax({ 
    'url' : '<?php echo site_url('submit/get_dropdown_values2'); ?>/' + selected_value, 
    'async' : false 
    }).responseText; 
    field_dropdown.replaceWith(result2); 
    } 

    function load_dropdown_content3(field_dropdown, selected_value){ 
    if(selected_value == 4){ 
    load_dropdown_content4(); 
    } 
    var result3 = $.ajax({ 
    'url' : '<?php echo site_url('submit/get_categories_filters'); ?>/' + selected_value, 
    'async' : false 
    }).responseText; 
    $('#catid3').empty();  // DIV CATID3 IS THE DIV WHERE CHECKBOXES ARE CREATED 
    $("#catid3").append(result3); 
    } 

    function load_dropdown_content4(field_dropdown, selected_value){ 

    var result4 = $.ajax({ 
    'url' : '<?php echo site_url('submit/get_categories_filters2'); ?>/' + selected_value, 
    'async' : false 
    }).responseText; 
    $('#catid3').empty(); // DIV CATID3 IS THE DIV WHERE CHECKBOXES ARE CREATED 
    $("#catid3").append(result4); 
    alert(result4); 
    }  
    </script> 

如果有人可以幫助我克服我從子類組合框獲得該未定義的錯誤，我會深深感激。

問候......

Answer 1

相反的$("$cat3")，你可以像下面也。

onchange = 'load_dropdown_content4("cat3",this.value)' 

在load_dropdown_content4

function load_dropdown_content4(field_dropdown, selected_value) 
{ 
    //replace field_dropdown.replaceWith(result2); 
    $("#"+field_dropdown).replaceWith(result2); 
} 

試試這個代碼。