codeigniter - 使用 jquery 和 ajax 发布的依赖下拉列表

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 发布后收到的数据填充第二个下拉列表。

Answer 1

我通过修改ajax post的成功函数找到了解决我的问题的方法：

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>

我只是将选择块的 id 输入到 ajax 帖子的成功函数中并附加了该值。它可以工作，但有一个问题是，当我更改第一个下拉菜单的选择时，会出现新值，但之前选择的值并没有消失。

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 时，我只需执行加载视图过程并将所有数据加载到另一个仅包含选择和选项语句以及显示数据的查询的小视图文件中，并在主视图下创建一个 id 为 div #分而治之，我做到了 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);
        });
    }
});