显示基于主类别的子类别不适用于AJAX

I have a car "make" and car "model" tables in my database. When I echo car "makes" it works properly. However, I want the car "model" drop-down to appear with ajax based on selected "make", it does not work in the view

我的数据库里有一辆汽车“制造”和汽车“模型”表。当我回应汽车“制造”它正常工作。但是，我希望汽车“模型”下拉列表与基于所选“make”的ajax一起显示，它在视图中不起作用

However, all information that I need, appears on the console's network tab.

但是，我需要的所有信息都显示在控制台的网络选项卡上。

Where can be the problem? Here is my ajax code:

哪里可以问题？这是我的ajax代码：

<script type="text/javascript">
var base_url = "<?php echo base_url();?>";

    $(document).ready(function() {
        $('select[name="make"]').on('change', function() {
            var makeid = $(this).val();
            if(makeid) {
                $.ajax({
                    url: base_url + 'myform/ajax/'+makeid,
                    type: "GET",
                    dataType: "json",
                    success:function(data) {
                        $('select[name="model"]').empty();
                        $.each(data, function(key, value) {
                            $('select[name="model"]').append('<option value="value.id">'+ 'value.title' +'</option>');
                        });
                    }
                });
            }else{
                $('select[name="model"]').empty();
            }
        });
    });
</script>

Here is the view:

以下是观点：

<?php $attributes = array( 'name' => 'addcar', 'id' => 'addcar'); ?>
                  <?php echo form_open_multipart('cars/create', $attributes); ?>

                            <div class="form-group label-floating">
                                <label class="control-label">
                                    Марка
                                    <small>*</small>
                                </label>
                                <select id="make" name="make" class="selectpicker" data-style="select-with-transition" required="true">
                                    <option value=""></option>

                                    <?php foreach($makes as $make): ?>
                                    <option value="<?= $make['id']; ?>"><?= $make['maketitle']; ?></option>
                                <?php endforeach; ?>
                              </select>
                            </div>

                            <div class="form-group label-floating">
                                <label class="control-label">
                                    Модель
                                    <small>*</small>
                                </label>
                                <select id="model" name="model" class="selectpicker" data-style="select-with-transition" required="true">

                              </select>
                            </div>

</form>

3 个解决方案

#1

You are appending to select element, but indeed you need to insert into it. Just get the first (option) element inside select and then append to that, something like this:

您将附加到select元素，但实际上您需要插入其中。只需获取select中的第一个（选项）元素，然后附加到该元素，如下所示：

<select>
<option id="firstOption">First Option</option>
</select>


$("#firstOption").append(...)

And by the way, why value.title is inside quotes ?

顺便说一句，为什么value.title在引号内？

+ 'value.title' +

#2

I have found a solution to my question. As I use "Creative Tim" admin dashboard, they have their own classes. And when I removed class="selectpicker" from the select part it worked. Actually, I don't know what is the connection between them?

我找到了解决问题的方法。当我使用“Creative Tim”管理仪表板时，他们有自己的课程。当我从其工作的选择部分中删除class =“selectpicker”时。其实，我不知道他们之间有什么联系？

#3

-1

You're not writing your values correctly, and you need to match the properties from the objects in your response to what you're trying to output:

您没有正确编写您的值，并且您需要将响应中的对象的属性与您尝试输出的内容相匹配：

$('select[name="model"]').append('<option value="value.id">'+ 'value.title' +'</option>');

should be

应该

$('select[name="model"]').append('<option value="' + value.id + '">'+ value.modeltitle +'</option>');

#1