首頁猿問重新填充以選擇選項

重新填充以選擇選項

JavaScript

三國紛爭 2022-10-27 14:45:14

我想重新填充數據以選擇選項，但我只有一個選擇數據，其他選擇不起作用，我認為它們依賴于“更改”功能。請 ...首先，我使用 json 數據創建州和地區下拉列表，然后在此選擇上設置更改方法并獲取地區數據并在地區選擇中填充這些數據，然后在地區選擇上設置更改方法并獲取鄉鎮數據并在鄉鎮選擇中填充。在 btn_save 上設置onclick 函數并將所有數據填充到表中。這是我的問題。我想編輯我的數據并在表格上設置編輯按鈕然后我想將表格數據填充到以前的選擇。但它只適用于state region select，這是我的簡單 html 代碼 <div> <select name="state" id="state"> <option value="">State And Region</option> </select> <select name="district" id="district"> <option value="">District</option> </select> <select name="township" id="township"> <option value="">Township</option> </select> <input type="text" id="desc" placeholder="Enter your keyword"> <button id="btn_save">Save</button> </div> <div> <table class="tbl_desc"> <tr> <th>State</th> <th>District</th> <th>Township</th> <th>Description</th> <th>Action</th> </tr> </table> </div>

查看完整描述

2 回答

互換的青春

TA貢獻1797條經驗獲得超6個贊

原因是您使用 fetch 而不等待承諾履行。

當您在結束時撥打電話時rePopulateSelect：

$('#state').val(state).change();

$('#district').val(district).change();

$('#township').val(township).change();

$('#desc').val(desc);

}

您正在更改處理程序中進行一些異步調用。要解決這個問題，請嘗試在更改處理程序中等待，例如在您的狀態更改處理程序中：

// 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 中使用您創建的函數，并且僅在有意義時才使用 await ...

async function rePopulateSelect(btn) {

....

$('#state').val(state);

await InitDistricts(state);

$('#district').val(district);

await InitTownships(district);

$('#township').val(township);

$('#desc').val(desc);

}

反對回復 2022-10-27

DIEA

TA貢獻1820條經驗獲得超2個贊

好吧，看來問題很明顯了。例如，您正在更改的值#district，這會使您的#district選擇選項設置為selected。但是由于 ajax 是一個異步調用，之后您將重寫選項的代碼，因此它不包含任何selected選項。

您應該在 ajax 代碼中附加您的選擇：

if(value = this_select_value) <option selected value="..."/>
else <option value="..."/>

并且this_select_value您應該使用除value( val()) 之外的其他一些選擇屬性，因為當您使用清除選項時，它正在被重寫html()。一些虛擬的，比如attr('last_val',val);

（不是一個有效的代碼，只是為了展示這個想法，可以修復你的代碼，但我不能在 github 上編輯它）

反對回復 2022-10-27

2 回答
0 關注
110 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

重新填充以選擇選項

重新填充以選擇選項

2 回答

添加回答