我正在一个电子商务网站上，用户可以在其中添加多个送货和帐单地址。由于送货地点将受到限制，因此用户必须从下拉菜单中选择地区，城市和地区。我编写了如下所示的HTML：
<form action="{{ route('address.store') }}" method="POST">
@csrf
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-md-12">
<div class="form-group required-field">
<label for="acc-name">Full Name</label>
<input type="text" value="{{ @$data->name }}" class="form-control" name="name" required>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-md-12">
<div class="form-group required-field">
<label for="region">Region</label>
<select class="form-control" name="region_id" id="region_id">
<option selected disabled>Please select your region</option>
@if(!empty($region_data))
@foreach($region_data as $data_region)
<option value="{{ $data_region->id }}" @if(@$data->region_id == $data_region->id) selected @endif>{{ $data_region->name }}</option>
@endforeach
@endif
</select>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-md-12">
<div class="form-group required-field">
<label for="acc-name">Contact Number</label>
<input type="text" value="{{ @$data->phone }}" class="form-control" name="phone" required>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-md-12">
<div class="form-group required-field">
<label for="acc-name">City</label>
<select class="form-control" name="city" id="city" disabled>
<option selected disabled>Please select your city</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-sm-6"></div>
<div class="col-sm-6">
<div class="row">
<div class="col-md-12">
<div class="form-group required-field">
<label for="acc-name">Area</label>
<select class="form-control" name="area" id="area" disabled>
<option selected disabled>Please select your area</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-sm-6"></div>
<div class="col-sm-6">
<div class="row">
<div class="col-md-12">
<div class="form-group required-field">
<label for="acc-name">Address</label>
<input type="text" value="" class="form-control" name="address" required>
</div>
</div>
</div>
</div>
<div class="col-sm-6"></div>
<div class="col-sm-6">
<div class="row mt-1">
<div class="col-md-12">
<div class="form-group required-field">
<input type="hidden" name="location" value="" id="location">
<button type="button" value="office" class="location_title office mr-1"><span ><i class="icon-company"></i> Office</span></button>
<button type="button" value="home" class="location_title home ml-1"><span ><i class="icon-home"></i> Home</span></button>
</div>
</div>
</div>
</div>
</div>
<div class="mb-2"></div><!-- margin -->
<div class="required text-right">* Required Field</div>
<div class="form-footer">
<div class="form-footer-right">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div><!-- End .form-footer -->
</form>
在我的脚本标签中，我有以下内容：
<script type="text/javascript">
let edit = "{{ @$data }}";
let region = '';
let city = '';
if(edit !== ''){
region = $('#region_id').val();
if(region != 'undefined'){
region = $('#region_id').val();
$.ajax({
method: "GET",
url:"/get-city/"+region,
dataType: 'json',
success: function(response) {
$.each(response, function(key, value) {
let selected_data = '';
if(edit != ''){
let city_data = "{{ @$data->region_id }}";
if(city_data != 'undefined'){
selected_data = 'selected';
}
}
$('#city').html('<option selected disabled>Please select your city</option>');
$('#city').append('<option value="'+response[key]['id']+'" '+selected_data+'>'+response[key]['name']+'</option>');
$('#city').removeAttr('disabled');
});
city = "{{ @$data->city }}";
$.ajax({
method: "GET",
url:"/get-area/"+city,
dataType: 'json',
success: function(response) {
$.each(response, function(key, value) {
let selected_data = '';
if(edit != ''){
let area_data = "{{ @$data->area }}";
if(area_data != 'undefined'){
selected_data = 'selected';
}
}
$('#area').html('<option selected disabled>Please select your area</option>');
$('#area').append('<option value="'+response[key]['id']+'" '+selected_data+'>'+response[key]['name']+'</option>');
$('#area').removeAttr('disabled');
});
}
});
},
});
}
}
$('#region_id').on('change', function(){
let region = $(this).val();
$('#area').html('<option selected disabled>Please select your area</option>');
$('#city').html('<option selected disabled>Please select your city</option>');
$('#area').attr('disabled', true);
$.ajax({
method: "GET",
url:"/get-city/"+region,
dataType: 'json',
success: function(response) {
$.each(response, function(key, value) {
$('#city').append('<option value="'+response[key]['id']+'">'+response[key]['name']+'</option>');
$('#city').removeAttr('disabled');
});
$('#city').on('change', function(){
city = $(this).val();
$.ajax({
method: "GET",
url:"/get-area/"+city,
dataType: 'json',
success: function(response) {
$.each(response, function(key, value) {
$('#area').append('<option value="'+response[key]['id']+'">'+response[key]['name']+'</option>');
$('#area').removeAttr('disabled');
});
}
});
})
},
});
})
</script>
上面的代码可以正常工作，但是我想使ajax成为一个函数，以避免代码重复。是否可以使ajax功能并使代码在添加和编辑部分上都能工作？任何建议将不胜感激。