使用 Codeigniter 选择带有 jquery 的链式 select 选项

Question

我不太擅长 jquery 和 ajax，我现在在 select 框上遇到困难。我使用 CI，我的代码如下。

另一个select框"category"数据将根据"brand"显示。如何从 "brand" 携带数据并使用 jquery 显示 "category" 中的数据？

查看

<select name="brand" class="form-control" id="brand" required>
    <?php
        if($items) {
            foreach($items as $key) {
    ?>
    <option value="<?php echo $key->brand_id ?>">
        <?php echo $key->brand_name ?>
    </option>
    <?php
            }
        }
    ?>
</select>

<select name="category" class="form-control" id="category" required>

</select>

Ajax

<script>
    $(function() {
        $("#brand").on('change', function() {
            var brand = $(this).val();
            $.ajax ({
                type: "post",
                url: "<?php echo base_url(); ?>receiving/showCategory",
                dataType: 'json',
                data: 'brand='+brand,

                success: function(msg) {
                    var options;
                    for(var i = 0; i<msg.length; i++) {
                        options = '<option>'+msg.category[i].category_name+'</option'>;
                    }
                    $('#category').html(options);
                }
            });
        });
    });
</script>

控制器

function showCategory() {
    $brand_id = $this->input->post('brand');
    $data['category'] = $this->item_model->category($brand_id);
    echo json_encode($data);
    }

我的类别 table 包含：category_id、category_name、brand_id。

Answer 1

看起来您的代码是正确的，但需要在 ajax 请求中稍微更改一下。您需要先将数据 return 解析为 parseJson 。 for 循环中的 options 变量应与 += 代码连接。请参见下面的示例：

<script>
$(function() {
    $("#brand").on('change', function() {
        var brand = $(this).val();
        $.ajax ({
            type: "post",
            url: "<?php echo base_url(); ?>receiving/showCategory",
            dataType: 'json',
            data: 'brand='+brand,

            success: function(msg) {
            var data = $.parseJSON(msg),options;
                for(var i = 0; i<data.length; i++) {
                    options += '<option>'+data.category[i].category_name+'</option'>;
                }
                $('#category').html(options);
            }
        });
    });
});
</script>

如果您对此代码有疑问，您应该将 codeigniter 部分中的变量更改为保存结果的变量。您可以在下面看到我的工作代码作为示例：

Js代码

       $.ajax({
          type : 'POST',
          url  : '<?php echo base_url();?>controller/function_name',
          dateType : 'json',
          data : {depart_id : _depart_id.val()},
          success : function(data){
            var json_data = $.parseJSON(data),
                options;
            for(var i = 0; i<json_data.length; i++){
              options += '<option value="'+json_data[i].destination_id+'">'+json_data[i].location+'</option>';
            }
            _destination_id.html(options);
          }
        });

这是codeigniter代码(php)

$destination  = $this->custom_model->get_destination_distinct($table,$where);
echo json_encode($destination);

Answer 2

您需要像

一样连接成功函数中的所有值

  options += '<option>'+msg.category[i].category_name+'</option'>;

  $('#category').html(options);

Answer 3

use ajax onchange. .in your view file.. 

<select name="brand" class="form-control" id="brand" required onchange="brand(this.value,'divid')">
    <?php
        if($items) {
            foreach($items as $key) {
    ?>
    <option value="<?php echo $key->brand_id ?>">
        <?php echo $key->brand_name ?>
    </option>
    <?php
            }
        }
    ?>
</select>
<div id="divid">
<select name="category" class="form-control" id="category" required>
<option>Select Category</option>
</select>
</div>



<script>
    function brand(id,divid)
    {
    $.ajax({
            type: "POST",
            data: "pid="+id,
            url: '<?php echo base_url(); ?>receiving/showCategory ?>',
            success: function(html){
                $('#'+divid).html(html);
            }
        });
    }

    </script>

在你的函数 showCategory() 中：

<div id="divid">
    <select name="category" class="form-control" id="category" required>
$brandid = $this->input->post('pid');
//you can pass this brand id to your query and echo the category in option value//   

<option>//your result //</option>
    </select>
    </div>

使用 Codeigniter 选择带有 jquery 的链式 select 选项

Choosing a chained select option with jquery using Codeigniter

javascript

php

ajax

jquery

codeigniter