Php 使用jquery和ajax post的codeigniter相关下拉列表

视图：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>

数据来自我检查过的ajax post之后的数据库

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

在控制台中

但是在我的视图的第二个下拉列表中，我无法理解如何使用数据

---

我的意思是如何用我在ajax帖子之后收到的数据填充第二个下拉列表。

我今天也做了同样的事情。当我通过ajax调用url时，我只需执行加载视图过程，并将所有数据加载到另一个小视图文件中，该文件仅包含select和option语句以及一个显示数据的查询，然后在主视图下创建一个id为#divid的div，只要ajax成功即可

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

该视图将显示在主页上

---

希望我能让你明白。

在success函数中写下这段代码。它将在第二个下拉列表中附加您的数据：

    <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({
    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);
        });
    }
});

$.ajax({
类型：“POST”，
数据：类别id，
url：“学习/依赖”下拉列表，
成功：功能（数据）{
$。每个（数据，函数（i，数据）{
var opt=$（''）；
opt.val（数据id_类型）；
opt.text（data.name）；
$（“#您的_第二个_下拉列表_id _name”）.append（opt）；
});
}
});

我通过修改ajax帖子的success函数找到了解决问题的方法：

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

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

成功：函数（数据）{
$。每个（数据，函数（i，数据）{
$（'#type'）。追加（“+data.name+”）；
});
}

将值追加到下拉列表中

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

--选择类型--

---

我只是将select块的id输入到ajaxpost的success函数中，并附加值。它可以工作，但有一个问题是，当我更改第一个下拉列表的选择时，会出现新值，但之前选择的值不会消失。

以下是对您答案的一些修改

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>");
        });
}

成功：函数（数据）
{
$（'#type'）.html（'--选择类型--'）；
$。每个（数据，函数（i，数据）{
$（'#type'）。追加（“+data.name+”）；
});
}

它将仅显示新项目。

查看代码：

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

我也有同样的问题。。这就是我所做的……工作得很好

---

您的代码也存在同样的问题。为上一个选择显示的值不会消失。如何解决此问题@abhijit Mali您必须首先清除第二个下拉列表的值。在您的更改事件$（“#您的第二个drpdown_id>选项”）开始时使用此行。删除（）@kev_m OP在

learning_model

中编写了与问题无关的查询。

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

$(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);