在PHP中使用AJAX更改另一个下拉菜单时，使用复选框更新多个下拉菜单值

Question

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

假设我在services表下有一些treatment。 对于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>

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

Answer 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