codeigniter - 依賴於jquery和ajax post的下拉列表

Question

查看：learning_view.php

這是我從數據庫填充的第一個下拉列表。

    <select name = 'category' id = 'category'>
        <option value="">-- Select Category --</option>
        <?php foreach($category as $item){ ?>
        <option value="<?php echo $item->id_cat; ?>"><?php echo $item->name; ?></option>
        <?php } ?>
    </select>
    <br><br>

我想要的是填充另一個下拉列表，這取決於第一個下拉列表。 為此，我使用了jQuery ajax帖子。

第二次下拉：

    <select name = 'type' id = 'type'>
        <option value="">-- Select Type --</option>
        <?php foreach($type as $item){ ?>
        <option value="<?php echo $item->id_type; ?>"><?php echo $item->name; ?></option>
        <?php } ?>
    </select>
    <br><br>

ajax帖子：

    jQuery(document).ready(function(){
      $("#category").change(function() {
        var category_id = {"category_id" : $('#category').val()};
        console.log(category_id);

        $.ajax({
          type: "POST",
          data: category_id,
          url: "<?= base_url() ?>learning/dependent_dropdown",

          success: function(data){

            $.each(data, function(i, data){
            console.log(data.name);
            console.log(data.id_type)
            });
           }
         });
       });
     });

控制器：learning.php

   public function dependent_dropdown()
   {
       if(isset($_POST['category_id']))
       {
           $this->output
           ->set_content_type("application/json")
           ->set_output(json_encode($this->learning_model->getType($_POST['category_id'])));
       }
   }

在我檢查過的ajax帖子之后，數據來自數據庫

    console.log(data.name);
    console.log(data.id_type)

在控制台中。

但無法弄清楚如何在我的視圖的第二個下拉列表中使用數據。

我的意思是如何用ajax post后收到的數據填充第二個下拉列表。

Answer 1

我通過修改ajax帖子的成功函數找到了我的問題的解決方案：

success: function(data) {
    $.each(data, function(i, data) {
        $('#type').append("<option value='" + data.id_type + "'>" + data.name + "</option>");
    });
}

將值附加到下拉列表中。

<select name="type" id="type">
    <option value="">-- Select Type --</option>
</select>

我只是將select塊的id輸入到ajax post的success函數中並附加了值。 它有效，但有一個問題，就是當我更改第一個下拉列表的選擇時，會出現新值，但是前一個選擇顯示的值不會消失。

Answer 2

以下是對答案的一些修改

success: function(data)
{
    $('#type').html('<option value="">-- Select Type --</option>');

        $.each(data, function(i, data){
        $('#type').append("<option value='"+data.id_type+"'>"+data.name+"</option>");
        });
}

它只會顯示新項目。

Answer 3

查看代碼：

<select id="category" name="prod_cat" class="form-control col-md-7 col-xs-12 category">
                    <?php if($category)
                        foreach ($category as $cat)
                        {
                    ?>
                            <option value="<?php echo $cat->cat_id;?>"><?php echo $cat->cat_title; ?></option>
                    <?php
                        }
                    ?>
                </select>

ajax代碼：

`

$(document).ready(function() {
    $('.category').change(function(){
      $.ajax({
        type: "POST",
        url: "<?php echo base_url();?>Product_admin/getSub",
        data:{id:$(this).val()}, 
        beforeSend :function(){
      $(".subcat option:gt(0)").remove();  
      $('.subcat').find("option:eq(0)").html("Please wait..");
        },                         
        success: function (data) {
          /*get response as json */
           $('.subcat').find("option:eq(0)").html("Select Subcategory");
          var obj=jQuery.parseJSON(data);
          $(obj).each(function()
          {
           var option = $('<option />');
           option.attr('value', this.value).text(this.label);           
           $('.subcat').append(option);
         });  
          /*ends */
        }
      });
    });
  });

`

控制器：

public function getSub()
{
      $result=$this->db->where('cat_id',$_POST['id'])
                    ->get('tbl_subcategory')
                    ->result();
    $data=array();
    foreach($result as $r)
    {
        $data['value']=$r->subcat_id;
        $data['label']=$r->subcat_title;
        $json[]=$data;


    }
    echo json_encode($json);

我也有同樣的問題..這就是我做的..工作得很好https://github.com/eboominathan/Dependent-Dropdown-in-Codeigniter-3.0.3

Answer 4

我今天做了同樣的事情。 當我通過ajax調用url時，我只需執行加載視圖過程並將所有數據加載到另一個小視圖文件中，只保存select和option statment以及查詢以顯示數據，並在主視圖下創建一個id為id的div divid，簡單地說我做了ajax的成功

$('#divid').html(data);

該視圖將顯示在主頁面上。

希望我能讓你理解。

Answer 5

在成功函數上寫下此代碼。 它將在第二個下拉列表中附加您的數據：

$.ajax({
    type: "POST",
    data: category_id,
    url: "<?= base_url() ?>learning/dependent_dropdown",
    success: function(data) {
        $.each(data, function(i, data) {
            var opt = $('<option />'); 
            opt.val(data.id_type);
            opt.text(data.name);
            $('#your_second_dropdown_id_name').append(opt);
        });
    }
});