动态多种形式:根据先前的选择值更改选择选项

时间:2018-09-05 08:12:49

标签: javascript html django django-forms vuejs2

我使用Django Model Formsets在页面上动态生成其他表单。用户可以生成所需数量的表格。这是通过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>

后续行动: 添加了vue方法(如下),用于说明我当前如何将Vuejs模型添加到Django模型Formsets中。问题:有更好的方法吗?

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
        })
    })
},

1 个答案:

答案 0 :(得分:0)

如上所述,由于没有回复,这是我的最终答案:

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
    })
})},