2 回答

TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個(gè)贊
原因是您使用 fetch 而不等待承諾履行。
當(dāng)您在結(jié)束時(shí)撥打電話時(shí)rePopulateSelect:
$('#state').val(state).change();
$('#district').val(district).change();
$('#township').val(township).change();
$('#desc').val(desc);
}
您正在更改處理程序中進(jìn)行一些異步調(diào)用。要解決這個(gè)問(wèn)題,請(qǐng)嘗試在更改處理程序中等待,例如在您的狀態(tài)更改處理程序中:
// create function for initing districts
async function InitDistricts(selectedState) {
await fetch('https://hoesein.github.io/select_error/data/lp_district.json')
.then( res => {
return res.json();
})
.then( json => {
$('#district').html('');
$('#district').html(`<option value=''>District</option>`);
$('#district').append(json.map(d => {
if(selectedState == d.sr_code){
return `<option value=${d.d_code}>${d.d_name}</option>` ;
}
}));
});
}
// attach as eventhandler
$('#state').change((e) => InitDistricts(e.target.value));
async function InitTownships(selectedDistrict) {
...
}
同樣在您的 rePopulateSelect 中使用您創(chuàng)建的函數(shù),并且僅在有意義時(shí)才使用 await ...
async function rePopulateSelect(btn) {
....
$('#state').val(state);
await InitDistricts(state);
$('#district').val(district);
await InitTownships(district);
$('#township').val(township);
$('#desc').val(desc);
}

TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超3個(gè)贊
好吧,看來(lái)問(wèn)題很明顯了。例如,您正在更改 的值#district
,這會(huì)使您的#district
選擇選項(xiàng)設(shè)置為selected
。但是由于 ajax 是一個(gè)異步調(diào)用,之后您將重寫選項(xiàng)的代碼,因此它不包含任何selected
選項(xiàng)。
您應(yīng)該在 ajax 代碼中附加您的選擇:
if(value = this_select_value) <option selected value="..."/> else <option value="..."/>
并且this_select_value
您應(yīng)該使用除value
( val()
) 之外的其他一些選擇屬性,因?yàn)楫?dāng)您使用 清除選項(xiàng)時(shí),它正在被重寫html()
。一些虛擬的,比如attr('last_val',val)
;
(不是一個(gè)有效的代碼,只是為了展示這個(gè)想法,可以修復(fù)你的代碼,但我不能在 github 上編輯它)
添加回答
舉報(bào)