Question

我想重新填充数据以选择选项，但我只有一个选择数据，而其他选择不起作用，我认为它们取决于“更改”功能。请...

首先，我使用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);
}

Answer 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);
}

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上对其进行编辑）

重新填充以选择选项

2 个答案: