防止下拉菜单中的多项选择答案

【问题标题】：Prevent multiple selection in drop down menu防止下拉菜单中的多项选择
【发布时间】：2019-03-24 23:25:48
【问题描述】：

我正在将数据加载到多个选择框中，我正在使用 laravel 和 vuejs。通过vuejs将数据加载到选择框中，但我需要选择框中没有多个选择。

我的示例选择框

<tr>
    <td>1</td>
    <td>
        <select name="test[]" id="test[]" class="js-example-basic-single form-control" style="width: 100%;">
            <option value="">Select items</option>
            <option v-for="category in categories" :value="category.cat_id">@{{category.name}}</option>

        </select>
    </td>
    <td>
        <input type="text" class="form-control items" id="cat_price[]" name="cat_price[]">


    </td>

</tr>
<tr>
    <td>1</td>
    <td>
        <select name="test[]" id="test[]" class="js-example-basic-single form-control" style="width: 100%;">
            <option value="">Select items</option>
            <option v-for="category in categories" :value="category.cat_id">@{{category.name}}</option>

        </select>
    </td>
    <td>
        <input type="text" class="form-control items" id="cat_price[]" name="cat_price[]">


    </td>

</tr>

JS函数

$('#table1 tr').each(function() {
    $(this).find('#test[]').change(function(){
        // alert($(this).val());
        if($('option[value='+$(this).val()+']:selected').length>1){
            alert('option is already selected');
            $(this).val($(this).find("option:first").val());
        }
    });
});

【问题讨论】：

使用类别创建两个计算属性来填充选择框，并使用 javascript 数组过滤器从每个计算属性中消除选定的选项。因此，当您从选择框中选择一个选项时，它将从另一个选择框中删除
@Abhijith 请更准确地解释您的用例
我有 10 个选择框从数据库中传递一些值，我需要从第一个选择框中选择一个项目，然后当我选择第二个选择框时，我不应该选择已经在第一个选择框中选择的项目 @boussadjrabrahim
这 10 个选择框具有相同的项目列表，我的意思是选择框重复了 10 次？？
是的，它有相同的 id @boussadjrabrahim

标签： javascript laravel vue.js vuejs2 laravel-5.6

【解决方案1】：

你可以使用它。 <option v-for="option in options" :disabled="selected.includes(option.value)" :value="option.value">

参考：Vuejs disabled selected dropdown options?

【讨论】：

它不工作会抛出一个空白页@Hardik Prajapati
如果它不起作用并显示一个空白页面，则应该是控制台错误。从错误中调试