我想重新填充数据以选择选项,但我只有一个选择数据,而其他选择不起作用,我认为它们取决于“更改”功能。请...
首先,我使用json数据创建州和地区下拉菜单,然后对此选择设置 change 方法并获取地区数据并填充这些数据地区选择中的数据,然后在地区选择上设置更改方法,并获取城镇的数据,并在城镇选择中填充
在btn_save上设置onclick函数并将所有数据填充到表中。
这是我的问题出来了。我想编辑我的数据,并在表格上设置编辑按钮,然后我想将表格数据填充到以前的选择中。但仅在州区域选择,
中有效这是我简单的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>
这是我的js代码
fetch('/data/lp_state_region.json')
.then( response => {
return response.json()
})
.then(json => {
$('#state').append(json.map( sr => {
return `<option value=${sr.sr_code}>${sr.sr_name}</option>` ;
}));
});
$('#state').change( e => {
let sr_code = e.target.value ;
fetch('/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(sr_code == d.sr_code){
return `<option value=${d.d_code}>${d.d_name}</option>` ;
}
}));
});
});
$('#district').change( e => {
let d_code = e.target.value ;
fetch('/data/lp_township.json')
.then( res => {
return res.json();
})
.then( json => {
$('#township').html('');
$('#township').html(`<option value=''>Township</option>`);
$('#township').append( json.map( ts => {
if(ts.d_code == d_code){
return `<option value=${ts.ts_code}>${ts.ts_name}</option>` ;
}
}));
});
});
$('#btn_save').click(() => {
let tr = "<tr>" ;
tr += `<td class="state">${$('#state').val()}</td>` ;
tr += `<td class="district">${$('#district').val()}</td>` ;
tr += `<td class="township">${$('#township').val()}</td>` ;
tr += `<td class="desc">${$('#desc').val()}</td>` ;
tr += "<td><button onclick='rePopulateSelect(this);'>Edit</button></td>" ;
tr += "</tr>" ;
$(".tbl_desc").append(tr);
$('#state').val('').change();
$('#district').val('').change();
$('#township').val('').change();
$('#desc').val('');
});
function rePopulateSelect(btn){
let tr = $(btn).closest('tr');
let state = tr.find('.state').html() ;
let district = tr.find('.district').html();
let township = tr.find('.township').html();
let desc = tr.find('.desc').html();
// i want to repopulate this data to select
// i am stuck at here
$('#state').val(state).change();
$('#district').val(district).change();
$('#township').val(township).change();
$('#desc').val(desc);
}
答案 0 :(得分:1)
原因是您正在使用访存,而没有等待诺言兑现。
在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);
}
答案 1 :(得分:0)
好的,问题似乎很明显。您正在更改例如#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上对其进行编辑)