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

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

codeigniter - 依赖于jquery和ajax post的下拉列表

5 个答案: