使用 jQuery 和 CodeIgniter 创建组合框和复选框

Question

我有一个名为 catid 的组合框，其中填充了类别。在更改时，我正在将内容填充到其他 2 个组合框，我在我的表单中添加了复选框，它们都基于选定的类别。

总共三个组合框，类别 (#catid)、子类别 (#catid2) 和制造商 (#manufacturerid) 按此顺序。

当没有子类别时，一切都很顺利。在子类别组合框中，我收到消息 没有子类别，我正在用该类别的制造商填充制造商组合框， 我正在再次绘制与此类别相关的组合框。

存在子类别时会出现问题。我正在尝试使用 on 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>

为了简单起见，我没有在这里显示制造商组合框，我对此没有任何问题，还有复选框

还有 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); 
}

试试这个代码。