[英]Dependent Dropdown using Java script works only on change primary dropdown, It must work on page load if primary dropdown already selected
我有一個主下拉菜單( 國家 )和第二個從屬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>
Java腳本代碼來填充依賴dropdown
。
<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代碼還必須如何在頁面加載時工作?
您將需要手動觸發更改事件。
在您之后:
$('select[name="country"]').on('change', function() { ... }
強制觸發:
$('select[name="country"]').trigger('change');
這樣,當document.ready函數即將結束時,您可以強制觸發事件,如果事件已設置,它將觸發ajax調用
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.