Laravel在多个下拉列表中隐藏选定的值

Question

我有供应商表并检索所有数据，然后在我的视图中传递它。我的模块之一是所有供应商的3个下拉列表。 我想将所选值隐藏在其他下拉列表中

示例：

 1) First dropdown
    > supplier 1
    > supplier 2
    > supplier 3
 2) Second dropdown
    > supplier 1
    > supplier 2
    > supplier 3
 3) Third dropdown
    > supplier 1
    > supplier 2
    > supplier 3

当我在第一个下拉列表中选择供应商1时，它将不会显示在其余的下拉列表中。

查看

@extends('layouts.app')

@section('content') 
    <?php $counter=3;?>
    @for($x = 1; $x<=$counter;$x++)
        <select id="supplier{{$x}}">

        @foreach($data as $row)
            <option value="{{$row->supplier_name}}">{{$row->supplier_name}}</option>
        @endforeach
        </select>
    @endfor

<script type="text/javascript">
        var $supplier1 = $("select[id='supplier1']");
        var $supplier2 = $("select[id='supplier2']");
        var $supplier3 = $("select[id='supplier3']");
        $supplier1.change(function() {
            $supplier2.find('option').prop("disabled", false);
            $supplier3.find('option').prop("disabled", false);
            var selectedItem = $(this).val();
            if (selectedItem) {
                $supplier2.find('option[value="' + selectedItem + '"]').prop("disabled", true);
                $supplier3.find('option[value="' + selectedItem + '"]').prop("disabled", true);
            }
        });
        $supplier2.change(function() {
            $supplier1.find('option').prop("disabled", false);
            $supplier3.find('option').prop("disabled", false);
            var selectedItem = $(this).val();
            if (selectedItem) {
                $supplier1.find('option[value="' + selectedItem + '"]').prop("disabled", true);
                $supplier3.find('option[value="' + selectedItem + '"]').prop("disabled", true);
            }
        });
        $supplier3.change(function() {
            $supplier1.find('option').prop("disabled", false);
            $supplier2.find('option').prop("disabled", false);
            var selectedItem = $(this).val();
            if (selectedItem) {
                $supplier1.find('option[value="' + selectedItem + '"]').prop("disabled", true);
                $supplier2.find('option[value="' + selectedItem + '"]').prop("disabled", true);
            }
        });
    </script>
@endsection

问题：如何在下拉列表中隐藏所选值？

已更新：

我更新了我的代码，如果已经选择它，现在可以将其禁用，但是存在问题。如果我选择任何下拉菜单

场景：

1) First dropdown
    > supplier 1
    > Selected supplier 2
    > supplier 3
 2) Second dropdown
    > supplier 1
    > supplier 2
    > supplier 3
 3) Third dropdown
    > supplier 1
    > supplier 2
    > supplier 3

在第二和第三下拉菜单中，您现在不能选择供应商2，但是当我在第二或第三下拉菜单中选择另一个值时，它现在可以选择供应商2。

场景：

1) First dropdown
    > supplier 1
    > Selected supplier 2
    > supplier 3
 2) Second dropdown
    > supplier 1
    > supplier 2
    > Selected supplier 3
 3) Third dropdown
    > supplier 1
    > supplier 2(Can now select)
    > supplier 3

问题：如何禁用下拉菜单中的第一和第二选定值？