How to ensure that value chosen in one dropdownlist will change values of another dropdownlist in Laravel

Question

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>

score 2 · Answer 1 · answered Aug 16 '18 at 20:43

2

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.

answered Aug 16 '18 at 20:43

Erubiel

2,934
14
32

score 2 · Accepted Answer · answered Aug 16 '18 at 20:55

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.

Good solution Foysal, but I use {{Form::select('IncomeExpense', array('E' => 'Expense', 'I' => 'Income'),null,['class'=>'form-control'])}} an array in my main dropdown for showing values and depending on one of those selected values it should influence the other dropdownlists and how can I access those array values in the Javascript — Mirasan, Aug 17 '18 at 02:32

How to ensure that value chosen in one dropdownlist will change values of another dropdownlist in Laravel

2 Answers2