在 PHP 中使用 AJAX 更改另一个下拉列表时，使用复选框更新多个下拉列表值答案

【问题标题】：Update multiple dropdown value with checkbox on change of another dropdown using AJAX in PHP在 PHP 中使用 AJAX 更改另一个下拉列表时，使用复选框更新多个下拉列表值
【发布时间】：2019-01-22 04:20:34
【问题描述】：

我想在我的项目中使用 AJAX 更改另一个下拉列表时更新多个下拉列表值。

假设我在treatment 表下有一些services。对于treatment A，服务为A1,A2,A3，treatment B 服务为B1,B2,B3。

当我从下拉列表中选择 treatment A 时，另一个下拉列表会自动更新为值 A1,A2,A3...当从下拉列表中选择 treatment B 时，另一个下拉列表会自动更新为值 B1,B2,B3。

当我使用时

<select id="department_id_appointment" multiple="multiple">
@if($_SESSION['department'] != null)

    @foreach($_SESSION['department'] as $data)

        <option value="{{ $data->id }}">{{ $data->name }}</option>

    @endforeach

@endif

数据显示正确

但是，虽然我想使用 AJAX 更新服务下拉列表值，但它什么也没显示，尽管值显示在 console log 中。

这是我的 AJAX 代码

$.ajax({

url:"{{ url('/filter_service') }}",
type: 'GET',
data: {_token :token, department_id : department_id, branch : branch},
success:function(msg){



    $('#service_id_appointment option').remove();

    trHTML = '';

    msg.forEach(function(item){

        trHTML += "<option value='"+item.id+"'>" + item.name + "</option>";
    });

    $('#service_id_appointment').append(trHTML);

    console.log(trHTML);
}

});

要更新下拉列表的 HTML

<div class="gaps" id="select_multiple_service_id">
<p>Service</p>

<select id="service_id_appointment" multiple="multiple">

</select>

<div id="service_id_message" class="val_error"></div>

这是控制台中显示的返回数据

【问题讨论】：

你的 ajax 有返回什么吗？
是的，它返回控制台中显示的值...但未显示在前端下拉列表中
如果它返回你想要或期望的，那么它很可能是一个 javascript / jquery 问题..
是的……还没有找到解决办法……
查看msg 中返回给 js 的内容可能很有用，你能告诉我们吗？或者生成返回值的 PHP 代码

标签： php jquery html ajax

【解决方案1】：

找到解决办法了！！

加载所有数据后添加以下代码

$('#service_id_appointment').multiselect('rebuild')

因为在加载完所有数据后，我们需要再次调用mulselect() 函数来制作多个下拉复选框。

这是完整的 Ajax 代码

$.ajax({

url:"{{ url('/filter_service') }}",
type: 'GET',
data: {_token :token, department_id : department_id, branch : branch},

success:function(msg){

    $('#service_id_appointment option').remove();

    trHTML = '';

    msg.forEach(function(item){

        trHTML += "<option value='"+item.id+"'>" + item.name + "</option>";
    });

    $('#service_id_appointment').append(trHTML);

    $('#service_id_appointment').multiselect('rebuild') //----add this line----
}

});

更多详情 Click here

【讨论】：