Question

我对jquery和ajax并不擅长，而且我现在在选择框上遇到了困难。我使用CI，我的代码如下。

将根据“品牌”显示另一个选择框“类别”数据。如何从“品牌”中携带数据并使用jquery在“类别”中显示数据？

查看

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

我的类别表包含：category_id，category_name，brand_id。

Answer 1

看起来你的代码是正确的，但需要在ajax请求中稍微改变一下。您需要先将数据返回到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的链式选择选项

3 个答案: