如何确保在一个下拉列表中选择的值将更改 Laravel 中另一个下拉列表的值
How to ensure that value chosen in one dropdownlist will change values of another dropdownlist in Laravel
我正在开发 Laravel 项目,我想要实现的是当用户在下拉列表中选择某个值时,它应该影响视图中的其他下拉列表,也就是说,如果用户在第一个下拉菜单然后应该禁用费用下拉列表或类似的东西
控制器
> 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>
在你放置 class 的数组中,你也可以像这样分配一个 id
{{Form::select('IncomeId', $income, null,['class'=>'form-control', 'id' => 'MyAwesomeId'])}}
然后您可以像使用普通 html 一样使用 javascript/jquery。
我为您找到了解决方案。但是您可以使用 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;
}
}
希望这对您有所帮助。
我正在开发 Laravel 项目,我想要实现的是当用户在下拉列表中选择某个值时,它应该影响视图中的其他下拉列表,也就是说,如果用户在第一个下拉菜单然后应该禁用费用下拉列表或类似的东西 控制器
> 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>
在你放置 class 的数组中,你也可以像这样分配一个 id
{{Form::select('IncomeId', $income, null,['class'=>'form-control', 'id' => 'MyAwesomeId'])}}
然后您可以像使用普通 html 一样使用 javascript/jquery。
我为您找到了解决方案。但是您可以使用 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;
}
}
希望这对您有所帮助。