Brtdku

I have supplier table and retrieving all the data then pass it in my view. One of my module I have 3 dropdown list of all supplier.
I want to hide the selected value in other dropdown list

Example:

 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

When I select the supplier 1 in first dropdown, it wont show on the remaining dropdown.

View

@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

Question: How can I hide the selected value in my dropdown list?

Updated:

I updated my code, it can be now disabled when it is already selected but there's a problem. If I chose any dropdown

Scenario:

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

In 2nd & 3rd dropdown you cant now choose supplier 2 but when I Selected another value in 2nd or 3rd dropdown it can now select the Supplier 2.

Scenario:

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

Question: How can I disabled the 1st & 2nd selected value in dropdown?