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

问题描述：

I was developing Laravel project and what I want to achieve is that when a user picks a certain value in dropdownlist, it should influence other dropdownlists in the view, that is, if user selects Income in the first dropdown then Expense dropdownlist should be disabled or something like that Controller

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

View

<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>

我正在开发Laravel项目，我想要实现的是当用户在下拉列表中选择某个值时，它应该影响视图中的其他下拉列表，也就是说，如果用户在第一个下拉列表中选择“收入”，则应禁用“费用”下拉列表或类似于控制器 p> ＆gt; public function create（）＆gt; { ＆GT; $ income = Income :: pluck（'title'，'id'）; ＆gt; $ expense = Expenses :: pluck（'title'，'id'）; ＆gt; return view（'IncomeExpense.create'，compact（'income'，'expense'））; ＆gt; } code> pre>

查看 p>


 
   p> 
  blockquote> 
 
  ＆lt; div class =“form-group”＆gt; 
＆gt;  {{Form :: label（'IncomeExpense'，'Income＆amp; Expense'）}} 
＆gt;  {{Form :: select（'IncomeExpense'，array（'E'=＆gt;'Expense'，'I'=＆gt;'收入'），null，['class'=＆gt;'form-control']）  }} 
＆GT;  ＆LT; / DIV＆GT; 
＆GT;  ＆lt; div class =“form-group”＆gt; 
＆gt;  {{Form :: label（''，'Income'）}} 
＆gt;  {{Form :: select（'incomeId'，$ income，null，['class'=＆gt;'form-control']）}} 
＆gt;  ＆LT; / DIV＆GT; 
＆GT;  ＆lt; div class =“form-group”＆gt; 
＆gt;  {{Form :: label（''，'Expense'）}} 
＆gt;  {{Form :: select（'ExpenseId'，$ expense，null，['class'=＆gt;'form-control']）}} 
＆gt;  ＆lt; / div＆gt; 
  code>  pre> 
  div>

答

I got a solution for you. But you may use select('title', 'id')->get() instade of pluck('title', 'id'). Because pluck is generally used for geting a single column value.

Now, for your solution, you can use a little bit of JavaScript. For that, you have to give an id to your select tags each. Like

Income Dropdown

<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>

And Expense Dropdown

<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>

Now, the validate() method

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;
    }
}

Hope this helps.

答

In the array where you put the class, you can also assign an id like this

{{Form::select('IncomeId', $income, null,['class'=>'form-control', 'id' => 'MyAwesomeId'])}}

Then you can use javascript/jquery as you would with normal html.

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

相关推荐