已选择Vue Js父选择选项,动态禁用了子选择选项

时间:2018-09-25 13:29:43

标签: javascript jquery html vue.js

嗨,我在这段代码中有一个父选择选项和一个子选择选项。

在父项中选择该选项时,必须禁用子项。

PS。父选择选项仅是子选项的克隆,因此它们具有相同的选项

到目前为止,这是我的代码。

 var $dropdown1 = $("select[name='dropdown1']");
        var $dropdown2 = $("select[name='dropdown2']");

        $dropdown1.change(function () {
            $dropdown2.empty().append($dropdown1.find('option').clone());
            var selectedItem = $(this).val();
            if (selectedItem) {
                $dropdown2.find('option[value="' + selectedItem + '"]').remove();
            }
        });

        var app = new Vue({
            el: "#app",
            data: {
                rows: []
            },
            methods: {
                addRow: function () {
                    var elem = document.createElement('tr');
                    this.rows.push({
                        title: []
                    });
                },
                removeElement: function (index) {
                    this.rows.splice(index, 1);
                },

            }
        });
<select name="dropdown1">
        <option></option>
        <option value="1">Test 1</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>


    <div id="app">
        <table class="table">
            <thead>
                <tr>
                    <td><strong>Title</strong></td>
                    <td><strong>Description</strong></td>
                    <td><strong>File</strong></td>
                    <td></td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(row, index) in rows">

                    <td>
                        <select name="dropdown2">
                            <option></option>
                            <option value="1">Test 1</option>
                            <option value="2">Test 2</option>
                            <option value="3">Test 3</option>
                        </select>
                    </td>
                    <td>
                        <a v-on:click="removeElement(index);" style="cursor: pointer">Remove</a>
                    </td>


                </tr>
            </tbody>
        </table>
        <div>
            <button class="button btn-primary" v-on:click="addRow">Add row</button>
        </div>
    </div>

我有一个动态行,其中添加了一个select选项。在父选项中选中子选择选项时,我想禁用该选项。

例如。 在“父级”选项中选择了“测试1”。

child选项还应该禁用Test 1选项。

此外,当我添加行时,应该禁用测试1。

就像在父选项上选中它一样完全禁用。

请帮助。

0 个答案:

没有答案