我的 laravel 專案中有國家和州的級聯下拉串列。我正在使用 JQuery 重繪 可用狀態串列，具體取決于在國家下拉串列中選擇的國家。這完美地作業。
我的問題是什么時候我想回去改變狀態。如果我回去編輯狀態，因為我沒有更改國家下拉串列，狀態下拉串列只列出所有狀態。
我通過國家下拉框觸發了更改事件的狀態。我在想，一種快速而骯臟的方法可能是在頁面加載時重繪 狀態下拉串列，但我在實作它時遇到了問題。
這是我目前所擁有的
這是視圖中的 JQuery
<script type="text/javascript">
jQuery(document).ready(function ()
{
jQuery('select[name="country"]').on('change',function(){
var countryID = jQuery(this).val();
if(countryID)
{
jQuery.ajax({
url : '/getStates/' countryID,
type : "GET",
dataType : "json",
success:function(data)
{
console.log(data);
jQuery('select[name="state"]').empty();
jQuery.each(data, function(key,value){
$('select[name="state"]').append('<option value="' key '">' value '</option>');
});
}
});
}
else
{
$('select[name="state"]').empty();
}
});
});
這是顯示國家和州下拉選單的視圖下拉框代碼。
<div class="form-group col-sm-11 col-md-5">
<label class="form-country" for="country">Country</label>
<select v-model="form.country" class="form-control" id="country" name="country">
@foreach ($countries as $country)
<option value="{{ $country->id }}" {{ $user->country_id == $country->id ? "selected" : "" }}>{{ $country->name }}</option>
@endforeach
</select>
</div>
<div class="form-group col-sm-11 col-md-3">
<label class="form-state" for="state">State</label>
<select v-model="form.state" class="form-control" id="state" name="state">
@foreach ($states as $state)
<option value="{{ $state->id }}" {{ $user->state_id == $state->id ? "selected" : ""}}>{{ $state->name }}</option>
@endforeach
</select>
</div>
正如我所說，它作業正常，如果我首先更改國家下拉串列，狀態下拉串列將重繪 ，但如果我想更改狀態，而不先更改國家，那么我只會得到所有狀態的串列。我想如果我可以在頁面加載事件上觸發狀態資料重繪 可能會修復它，但我不知道如何在 JQuery 中做。
uj5u.com熱心網友回復：
重繪 country串列應該像jQuery('select[name="country"]').trigger('change')在設定監聽器后呼叫一樣簡單，唯一需要注意的是您將丟失當前state選擇，因為您將清空并重新填充它。您可以通過首先保存其值并檢查它是否存在于新狀態串列中來解決此問題。
jQuery(document).ready(function ()
{
// Cache the jQuery objects, don't look them up in each access
var $countrySelector = jQuery('select[name="country"]');
var $stateSelector = jQuery('select[name="state"]');
$countrySelector.on('change',function(){
var countryID = $countrySelector.val();
var stateID = $stateSelector.val();
if(countryID)
{
jQuery.ajax({
url : '/getStates/' countryID,
type : "GET",
dataType : "json",
success:function(data)
{
$stateSelector.empty();
jQuery.each(data, function(key,value){
// Check if current element matches previous selection
$stateSelector.append(
`<option value="${key}"${key == stateID ? ' selected' : ''}>${value}</option>`
);
});
}
});
}
else
{
$stateSelector.empty();
}
});
// After document is loaded and handler set up, fire the handler
$countrySelector.trigger('change');
});
模板文字的進一步參考。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/406165.html
標籤：
上一篇：按順序淡入/淡出元素