使用 AJAX 和 PHP 将 <options> 附加到 <select>

Posted 2023-02-24

【中文标题】使用 AJAX 和 PHP 将 <options> 附加到 <select>

【英文标题】：Append <options> to <select> using AJAX & PHP

【发布时间】：2016-02-12 14:49:58

【问题描述】：

我的数据库中有两个表：

1. 动物类型 2. 品种

animal_type：

type_id  |    name
------------------------
1        |  Dog
2        |  Cat
3        |  etc...

品种

ID   |  type_id |  name 
---------------------------
1    |    1     | Labrador
2    |    1     | Putbull
3    |    2     | Persian
etc.....

在我的首页上，我想显示选择下拉菜单，其中包含根据动物类型选择的动物类型和品种。

1.选择动物类型

<select id="animal_type">
   <option value="<?php $type->id">Dog</option>
   <option value="<?php $type->id">Cat</option>
</select>

2。如果用户选择类型，则禁用基于类型的品种选择列表

<!-- user select Dog type!  fetch all dog breeds -->
<select id="breeds" disabled>
   <option value="<?php $type->id">Labrador</option>
   <option value="<?php $type->id">Pitbull</option>
</select>

所以我想根据选择的女巫类型从我的控制器加载所有品种。我试着用 ajax 来解决这个问题，但对他不太好。 我试试这个，但不知道如何添加新选项来选择下拉菜单。

脚本：

$(document).ready(function() 

   // $("#breeds").attr('disabled', true);

    // check if selected
    if($("#animal_type").find('option:selected').val() == 0) 
        $("#breeds").attr('disabled', true);
    

    $('#animal_type').change(function()
        // get value of selected animal type
        var selected_animal_type = $(this).find('option:selected').val();

        $.ajax(
            url : "url-to-site/index.php/account/getBreedsByTypeID/1",
            type:'POST',
            dataType: 'json',
            success: function(response) 
                $("#breeds").attr('disabled', false);

                //alert(response); // show [object, Object]

                var $select = $('#breeds');

                $select.find('option').remove();
                $.each(response,function(key, value)
                
                    $select.append('<option value=' + key + '>' + value + '</option>'); // return empty
                );
             
        );
    );
 );

JSON 返回我的自定义品种名称

["breed_name":"Nema\u010dki prepeli\u010dar","breed_name":"Irski vodeni \u0161panijel","breed_name":"Barbe (Barbet)","breed_name":"Lagoto 
My controller `mysite.com/index.php/account/getBreedsByTypeID/1`

此 url 返回以下编码的 JSON

$breeds = $this->animal_breed->findAllBreedsByType($id); // Model @return array

return json_encode($breeds);

那么如何根据类型将该结果附加到我的选择中？

您能举个例子来解决这个问题吗？谢谢。

【问题讨论】：

您在$.ajax 请求中缺少data 参数，请尝试添加data: id: selected_animal_type 。另外，您确定网址正确吗？

【参考方案1】：

$.ajax(
            url : "url-to-site/index.php/account/getBreedsByTypeID/1",
            type:'POST',
            dataType: 'json',
            success: function(response) 
                $("#breeds").attr('disabled', false);
                $.each(response,function(key, value)
                
                    $("#breeds").append('<option value=' + key + '>' + value + '</option>');
                );
             
        );

【参考方案2】：

$.ajax(
        url : "url-to-site/index.php/account/getBreedsByTypeID/1",
      data:id:selected_animal_type,             
        type:'POST',
        dataType: 'json',
        success: function(response) 
            $("#breeds").attr('disabled', false);
            $.each(response,function(key, value)
            
                $("#breeds").append('<option value=' + key + '>' + value.breed_name + '</option>');
            );
         
    );