动态多表单：根据先前的选择值更改选择选项答案

【问题标题】：Dynamic multiple forms: Change select options based on previous select value动态多表单：根据先前的选择值更改选择选项
【发布时间】：2018-09-05 08:12:49
【问题描述】：

我使用 Django 模型表单集在页面上动态生成其他表单。用户可以根据需要生成任意数量的表单。这是在 Vuejs 方法中完成的。

我的问题是更改选择第一个选择值的表单的第二个选择的选项。我正在考虑尝试聚焦或单击以获取上次更改的选择，但我不确定这将如何工作。

我确实会跟踪页面上当前的表单数量。

在下面的示例中。如果用户将 form_select_0 更改为 One，我需要 form_subselect_0 只有选项 C 和 D，但不应更改 form_1 中的选择。

例子：

<form id = form_0>
    <select id="form_select_0">
    <option value="one">One</option>
    <option value="two">Two</option>
    </select>

    <select id="form_subselect_0">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    </select>
</form>

<form id = form_0>
    <select id="form_select_1">
    <option value="one">One</option>
    <option value="two">Two</option>
    </select>

    <select id="form_subselect_1">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    </select>
</form>

跟进： 为我当前如何将 Vuejs 模型添加到 Django 模型表单集添加了 vue 方法（如下）。问：有没有更好的办法？

addForm: function () {
    this.count++
    let form_count = this.count
    form_count++

    let formID = 'id_form-' + this.count
    incremented_form = this.vue_form.replace(/form-\d/g, 'form-' + this.count)
    this.formList.push(incremented_form)
    this.$nextTick(() => {
        let total_forms = document.getElementsByName('form-TOTAL_FORMS').forEach
        (function (ele, idx) {
            ele.value = form_count
        })
    })
},

【问题讨论】：

标签： javascript html django django-forms vuejs2

【解决方案1】：

如上所述，由于没有回应，这是我的最终答案：

addForm: function () {
this.count++
let form_count = this.count
form_count++

let formID = 'id_form-' + this.count
incremented_form = this.vue_form.replace(/form-\d/g, 'form-' + this.count)
this.formList.push(incremented_form)
this.$nextTick(() => {
    let total_forms = document.getElementsByName('form-TOTAL_FORMS').forEach
    (function (ele, idx) {
        ele.value = form_count
    })
})},

【讨论】：