php - 如何确保在一个下拉列表中选择的值将更改 Laravel 中另一个下拉列表的值

Question

我正在开发 Laravel 项目，我想要实现的是，当用户在下拉列表中选择某个值时，它应该影响 View 中的其他下拉列表，也就是说，如果用户在第一个下拉列表中选择收入，那么费用下拉列表应该被禁用或类似的事情 Controller

>  public function create()
>     {
>         $income = Income::pluck('title', 'id');
>         $expense=Expenses::pluck('title', 'id');
>         return view ('IncomeExpense.create', compact('income','expense'));
>     }

查看

<div class="form-group">
>      {{Form::label('IncomeExpense', 'Income&Expense')}}
>      {{Form::select('IncomeExpense', array('E' => 'Expense', 'I' => 'Income'),null,['class'=>'form-control'])}}
>     </div>
>     <div class="form-group">
>             {{Form::label('', 'Income')}}           
>             {{Form::select('IncomeId', $income,null,['class'=>'form-control'])}}
>            </div>
>            <div class="form-group">
>                 {{Form::label('', 'Expense')}}           
>                 {{Form::select('ExpenseId', $expense,null,['class'=>'form-control'])}}
>                </div>

Answer 1

我为你找到了解决方案。但您可以使用 select('title', 'id')->get() 代替 pluck('title', 'id')。因为pluck一般用于获取单列值。

现在，对于您的解决方案，您可以使用一点JavaScript。为此，您必须为每个 select 标记提供一个 id。喜欢

收入下降

<select class="form-control select2" id="income" onChange="validate()">
  <option value="selectincome">--- selectincome ---</option>
  @foreach($incomes as $income)
  <option value="{{$income['id']}}">{{$income['title']}}</option>
  @endforeach
</select>

和费用下拉列表

<select class="form-control select2" id="expense" onChange="validate()">
  <option value="selectexpence">--- selectexpence ---</option>
  @foreach($expenses as $expense)
  <option value="{{$expense['id']}}">{{$expense['title']}}</option>
  @endforeach
</select>

现在，validate() 方法

JavaScript

function validate(){
    var ddlIncome = document.getElementById("income");
    var ddlExpence = document.getElementById("expense");

    var selectedValueIncome = ddlIncome.options[ddlIncome.selectedIndex].value;
    var selectedValueExpence = ddlExpence.options[ddlExpence.selectedIndex].value;

    if (selectedValueIncome != "selectincome"){
        document.getElementById("expense").disabled=true;
    }
    else if (selectedValueIncome != "selectexpence"){
        document.getElementById("income").disabled=true;
    }
}

希望这有帮助。