<div >
        <label for="">food 1 </label>
        <select name="food1"  style="width: 100%;">
        @foreach($items as $item)
        <option value="{{ $item->name }}">{{ $item->name }}</option>
        @endforeach
    </select>
    </div> 
    <div >
        <label for="">food 2</label>
        <select name="food2"  style="width: 100%;">
        @foreach($items as $item)
        <option value="{{ $item->name }}">{{ $item->name }}</option>
        @endforeach
    </select>
    </div>

Tried using javascript, but its not working. Tried so many things

CodePudding user response：

You can use AJAX here.

• Call using ajax on change of first drop-down
• In Ajax, send value of selected item
• In Backend, Return all the items from database except that selected value
• And now using javascript/jQuery, update the second drop-down list.

CodePudding user response：

If you don't want remove data from database , you can use jquery easily by below steps:

1. add id for all options in second select tags
2. add first select id

$(document).ready(function() {
            $("#optionselect").change(function() {
                var values = $("#optionselect option:selected");
                var selectd = values.text();
                $('#' selectd).remove();

            });
        });

<div >
        <label for="">food 1 </label>
        <select id="optionselect" name="food1"  style="width: 100%;">
            @foreach ($items as $item)
                <option  value="{{ $item->name }}">{{ $item->name }}</option>
            @endforeach
        </select>
    </div>
    <div >
        <label for="">food 2</label>
        <select name="food2"  style="width: 100%;">
            @foreach ($items as $item)
                <option id="{{ $item->name }}" value="{{ $item->name }}">{{ $item->name }}</option>
            @endforeach
        </select>
    </div>