重新填充以选择选项

Question

我想重新填充数据以选择选项，但我只有一个选择数据，其他选择不起作用，我认为它们依赖于“更改”功能。请 ...首先，我使用 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>

Answer 1

原因是您使用 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);

}

Answer 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 上编辑它）