嗨,我在这段代码中有一个父选择选项和一个子选择选项。
在父项中选择该选项时,必须禁用子项。
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。
就像在父选项上选中它一样完全禁用。
请帮助。