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

时间:2014-01-30 12:26:49

标签: php codeigniter combobox onchange

我有一个名为catid的组合框,它填充了类别。在变化时,我正在填写其他内容 2个组合框,我在我的表单中添加了复选框,这些复选框都基于选定的类别。

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

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

存在子类别时出现问题。我正在尝试使用更改事件来获取与该子类别相关的复选框。 我得到了未定义的价值。

这是我的代码:

控制器:

 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 combobox,我没有任何问题和复选框

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

如果有人能帮助我克服我从子类别组合框中得到的那个未定义的错误,我将深表感谢。

问候......

1 个答案:

答案 0 :(得分: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); 
}

试试这段代码。