在PHP中使用AJAX更改另一個下拉列表時，使用復選框更新多個下拉列表值

Question

我想在項目中使用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>

這是控制台中顯示的返回數據

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

}）;

欲了解更多詳情，請點擊這里