使用 Java 脚本的依赖下拉列表仅适用于更改主下拉列表，如果已选择主下拉列表，则必须在页面加载时工作

Question

我有一个主要下拉列表(国家/地区(和第二个相关dropdown。 (状态(。只有当我们选择主要dropdown时，此代码才能正常工作。但如果在页面加载时已选择主下拉列表，则不起作用。

主要下拉国家/地区：

<select class="select4" name="country" id="country">
<option value="">Please Select</option>
@foreach($country_data as $country)
<option value="{{$country->country_id}}" {{$profile_data->country == $country->country_id  ? 'selected' : ''}}>{{$country->country_name}}</option>
@endforeach
</select>

依赖下拉状态：

<select class="select4" name="state" id="state">
<option value="">Please Select</option>
@foreach($state_data as $state)
<option value="{{$state->state_id}}" {{$profile_data->state == $state->state_id  ? 'selected' : ''}}>{{$state->state_name}}</option>
@endforeach
</select>

用于填充依赖dropdown的 Java 脚本代码。

<script type="text/javascript">
$(document).ready(function() {
$('select[name="country"]').on('change', function() {
var countryID = $(this).val();
if(countryID) {
$.ajax({
url: 'family/state/'+countryID,
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="state"]').empty();
$.each(data, function(key, value) {
$('select[name="state"]').append('<option value="'+ value.state_id +'">'+ value.state_name +'</option>');
});
}
});
}else{
$('select[name="state"]').empty();
}
});
});

Ajax 代码也必须如何在页面加载时工作？

Answer 1

您需要手动触发更改事件。

之后：

$('select[name="country"]').on('change', function() { ... }

强制触发：

$('select[name="country"]').trigger('change');

这样，当您的document.ready函数即将结束时，您可以强制触发事件，如果设置了该事件，它将触发ajax调用