Laravel下拉框互斥选值实现及后端判断异常排查

一、后端判断逻辑错误修复 #

你代码里的判断条件用错了运算符：$request->food1=$request->food2 是赋值操作，会把food2的值赋给food1，这个表达式的结果永远为真（只要food2非空），所以每次都会进入"Wrong"分支。

修正后的store方法 #

public function store(Request $request)
{
    // 用==比较值相等，或用===做严格类型+值比较
    if ($request->food1 == $request->food2)
    {
        echo($request->food1);
        echo($request->food2);
        echo("Wrong");
    }
    else
    {
        $project = new Project;
        $project->food1 = $request->input('food1');
        $project->food2 = $request->input('food2');
        $project->save();
        return redirect()->back()->with('status','Added Successfully');
    }
}

更规范的Laravel表单验证写法 #

推荐用框架自带的验证规则替代手动判断，自动处理错误提示：

public function store(Request $request)
{
    $request->validate([
        'food1' => 'required',
        'food2' => 'required|different:food1',
    ], [
        'food2.different' => 'food1和food2不能选择相同的值'
    ]);

    $project = new Project;
    $project->food1 = $request->input('food1');
    $project->food2 = $request->input('food2');
    $project->save();
    
    return redirect()->back()->with('status','Added Successfully');
}

二、前端下拉框联动实现（选中项互斥） #

下面用原生JavaScript实现，监听第一个下拉框的变化，动态过滤第二个下拉框的选项：

第一步：修改HTML，给下拉框加ID #

<div class="form-group mb-3">
    <label for="">food 1 </label>
    <select name="food1" id="food1" class="js-example-basic-single" style="width: 100%;">
        @foreach($items as $item)
        <option value="{{ $item->name }}">{{ $item->name }}</option>
        @endforeach
    </select>
</div> 
<div class="form-group mb-3">
    <label for="">food 2</label>
    <select name="food2" id="food2" class="js-example-basic-single" style="width: 100%;">
        @foreach($items as $item)
        <option value="{{ $item->name }}">{{ $item->name }}</option>
        @endforeach
    </select>
</div>

第二步：添加JavaScript联动逻辑 #

// 保存第二个下拉框的原始选项，避免重复渲染
const food2OriginalOptions = Array.from(document.getElementById('food2').options);

// 监听第一个下拉框的change事件
document.getElementById('food1').addEventListener('change', function() {
    const selectedFood = this.value;
    const food2Select = document.getElementById('food2');
    
    // 清空第二个下拉框
    food2Select.innerHTML = '';
    
    // 遍历原始选项，排除已选中的项并添加
    food2OriginalOptions.forEach(option => {
        if (option.value !== selectedFood) {
            food2Select.appendChild(option.cloneNode(true));
        }
    });
    
    // 如果原选中项被排除，重置为第一个可用选项
    if (food2Select.value === selectedFood) {
        food2Select.selectedIndex = 0;
    }
});

// 页面加载时初始化一次，避免默认选中相同值
document.getElementById('food1').dispatchEvent(new Event('change'));

jQuery版本（如果项目用了jQuery） #

const $food2 = $('#food2');
const food2OriginalOptions = $food2.html();

$('#food1').on('change', function() {
    const selectedVal = $(this).val();
    // 重新渲染选项并排除选中值
    $food2.html(food2OriginalOptions).find(`option[value="${selectedVal}"]`).remove();
    
    // 重置选中状态
    if ($food2.val() === selectedVal) {
        $food2.prop('selectedIndex', 0);
    }
});

// 初始化触发
$('#food1').trigger('change');

内容的提问来源于stack exchange，提问作者wafi