Javascript LITHTML 在渲染下拉菜单时仍然使用之前的下拉菜单 Select 索引

我正在使用Lit-HTML(而不是Lit-Element)来构建一个html表单.表格非常简单，它有2个下拉列表:种群下拉列表和动物下拉列表.

动物下拉列表选项取决于种群下拉列表的 Select .请参见getAnimalDS()逻辑.

Model Definition & Utility function:个

const model = {
    Population: null,
    Animal: null,
}

const dataSources = {
    Populations: [null, "p1", "p2"],
    Animals_1:   [null, "a1", "a2"],
    Animals_2:   [null, "a3", "a4", "a5"],
}

function getAnimalDS(population) {
    switch (population) {
        case 'p1':
            return dataSources.Animals_1;
        case 'p2':
            return dataSources.Animals_2;
        default:
            return [];
    }
}

The main function to build LIT-HTML template:个

function buildSection1(model) {
    return html`
    
    <div class="mb-3">
        <label for="Population" class="form-label">Population</label>
        <select id="Population" name="Population" class="form-control"
            .value="${model.Population}" @change=${e => {
                            model.Population = e.target.value;
                            model.Animal = null; // Reset Animal
                            renderSection1(); // Re-render the form
                     }}>

            ${dataSources.Populations.map((item) => html`
                    <option value="${item}" ?selected="${model.Population === item}">${item}</option>
            `)}
        </select>
    </div>

    <div class="mb-3">
        <label for="Animal" class="form-label">Animal</label>
        <select id="Animal" name="Animal" class="form-control"
            .value="${model.Animal}" @change=${e => model.Animal = e.target.value}>

            ${getAnimalDS(model.Population).map((item) => html`
                    <option value="${item}" ?selected="${model.Animal === item}">${item}</option>
            `)}
        </select>
    </div>

    `;
}

TESTING:个

如果我在种群下拉列表中 Select 一个种群，我会看到动物上的选项被正确地更改了-&gt；太棒了.

STEPS to see issue:个

#1:在种群下拉列表中 Select 选项"p1"，我在动物下拉列表中看到3个选项:""、‘a1’、‘a2’--很好

#2:接下来，我在动物下拉列表中 Select ‘a2’( Select 的索引=2)-&gt；Good

#3:现在，在种群下拉列表中 Select 选项p2，我在动物下拉列表中看到4个选项:""、‘a3’、‘a4’、‘a5’-&gt；好

#4:此时，我希望在Animal下拉列表中看到‘Empty’行(选定索引=-1)，因为在@Change of the Popular时，我确实将mod.Animal重置为空.

-但动物下拉列表显示选项‘A4’(选定索引=2)

-这意味着LIT-HTML第2步使用先前 Select 的索引=2.

有什么 comments 吗？谢谢!