javascript - Multiple Dropdown Remove Selected Value from first dropdown on second dropdown

Question

I have 2 dropdown that is displaying data from same table in database. It is like dropdown for choice selection.

I need to filter the choice2 dropdown. For example, if value a is selected on choice1, it will not display again in choice2

<select name="choice1" id="choice1">
<option value="Select">Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option></select>

<select name="choice2" id="choice2">
<option value="Select">Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option></select>

Here is my code in laravel blade

<tr>
                  <td>
                        <div>
                                    <select  name="addchoice[0][program]"  class="form-control @error('level') is-invalid @enderror" style="width: 100%;" data-select2-id="2" tabindex="-1" aria-hidden="true">
                                        <option value="">Select Program</option>
                                        @foreach ($offeredPrograms as $offeredProgram)
                                        <option value="{{ $offeredProgram->id }}" {{ ( old('offeredProgram') == $offeredProgram->id) ? 'selected' : '' }}> 
                                            {{ $offeredProgram->branch_course->course->name}} - {{$offeredProgram->branch_course->branch->name }} 
                                        </option>
                                    @endforeach    
                                    </select>
                        </div>
                  
                  </td>
                  <td></td>
                </tr>
                <tr>
                <td><input type="hidden" readonly="true" name="addchoice[1][choice]" value="2" style ="border: none">2.<span style="color: red;">*</span></input></td>
                    <td>
                        <div>
                                    <select  name="addchoice[1][program]" class="form-control @error('level') is-invalid @enderror" style="width: 100%;" data-select2-id="2" tabindex="-1" aria-hidden="true">
                                        <option value="">Select Program</option>
                                        @foreach ($offeredPrograms as $offeredProgram)
                                        <option value="{{ $offeredProgram->id }}" {{ ( old('offeredProgram') == $offeredProgram->id) ? 'selected' : '' }}> 
                                        {{ $offeredProgram->branch_course->course->name}} - {{$offeredProgram->branch_course->branch->name }} 
                                        </option>
                                    @endforeach  
                                    </select>
                        </div>

                    </td>

                    <td></td>
                </tr>

                <tr>
                <td><input type="hidden" readonly="true" name="addchoice[2][choice]" value="3" style ="border: none">3.<span style="color: red;">*</span></input></td>
                    <td>
                        <div>
                                    <select  name="addchoice[2][program]" class="form-control @error('level') is-invalid @enderror" style="width: 100%;" data-select2-id="2" tabindex="-1" aria-hidden="true">
                                        <option value="">Select Program</option>
                                        @foreach ($offeredPrograms as $offeredProgram)
                                        <option value="{{ $offeredProgram->id }}" {{ ( old('offeredProgram') == $offeredProgram->id) ? 'selected' : '' }}> 
                                        {{ $offeredProgram->branch_course->course->name}} - {{$offeredProgram->branch_course->branch->name }} 
                                        </option>
                                    @endforeach  
                                    </select>
                        </div>

                    </td>

                    <td></td>
                </tr>

标签： javascriptjquerylaravel-8

Answer 1

Controller:

public function form()
{
    $options = $offeredPrograms->map(function($offeredProgram) {
        return (object)[
            'value' => $offeredProgram->id,
            'label' => $offeredProgram->branch_course->course->name.' - '.$offeredProgram->branch_course->branch->name,
            'select' => 'choice'.old('offeredProgram')
        ];
    });

    return view('your-blade-template', compact('options', 'your-other-variables'));
}

You can use the $options in JavaScript via @json($options).

You can dynamically render your dropdowns and control them via an array:

var options = [
    { value: '', label: 'Select Programm', select: null },
    { value: 'a', label: 'a', select: null },
    { value: 'b', label: 'b', select: null },
    { value: 'c', label: 'c', select: null },
];

var choice1 = document.getElementById('choice1');
var choice2 = document.getElementById('choice2');
var selects = [ choice1, choice2 ];
choice1.addEventListener('change', onChange);
choice2.addEventListener('change', onChange);

function renderSelects() {
    for(var select of selects) {
        select.textContent = '';
        var selectOptions = options.filter(function(option) {
            return option.select === select.id || option.select === null;
        });
        select.append(...selectOptions.map(function(option) {
            var el = document.createElement('option');
            el.value = option.value;
            el.textContent = option.label;
            if (el.select === select.id) {
                el.selected = true;
            }
            return el;
        }))
    }
}
renderSelects();

function onChange(evt) {
    var option = options.find((option) => option.value === evt.target.value);
    var previousOption = options.find((option) => option.select === evt.target.id);
    if (previousOption !== undefined) {
        previousOption.select = null;
    }
    option.select = evt.target.id;
    renderSelects();
}

<select name="choice1" id="choice1"></select>

<select name="choice2" id="choice2"></select>