Задача сделать два select для панели поиска , с задачей справился - при выборе select(model) появляется второй select(device) с доступными устройствами. При выборе устройства и отправке формы получается что второй не соответствует выбранному значению. В браузере получается следующее :
<div class="search-panel" style="font-size: 24px;" >
<form id="search-box" method="Post" action="/phone/get_table">
<div class="search-box">
Выберете устройство :
<select id="select1" name="model">
<option id="opt" value="1" onClick="showhide(1)">Apple</option>
<option id="opt" value="3" onClick="showhide(3)">Nokia</option>
<option id="opt" value="4" onClick="showhide(4)">HTC</option>
<option id="opt" value="8" onClick="showhide(8)">Alcatel</option>
<option id="opt" value="10" onClick="showhide(10)">LG</option>
<option id="opt" value="11" onClick="showhide(11)">Meizu</option>
<option id="opt" value="13" onClick="showhide(13)">Philips</option>
<option id="opt" value="16" onClick="showhide(16)">ZTE</option>
</select>
<div id="1" style="display: none;" >
<select name="device">
<option value="1">iPhone 6</option>
<option value="3">iPhone 5s</option>
<option value="7">iPhone 6s</option>
<option value="10">IPhone 4</option>
<option value="12">IPhone 6 plus</option>
</select>
</div>
<div id="3" style="display: none;" >
<select name="device">
<option value="0">[--все--]</option>
</select>
</div>
<div id="4" style="display: none;" >
<select name="device">
<option value="4">HTC One M8</option>
<option value="13">Другие</option>
</select>
</div>
<!--.....-->
<div id="8" style="display: none;" >
<select name="device">
<option value="0">[--все--]</option>
</select>
</div>
<input type="hidden" name="brand" value ="1">
<button class="btn" href="#">Найти</button>
</div>
</form>
</div>
<!--javascript-->
<script type="application/javascript">
var divState = {};
function showhide(id) {
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
//close others
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
divid.style.display = (divid.style.display == 'inline-block' ? 'none' : 'inline-block');
}
}
</script>
на php это выглядит следующим образом :
<div class="search-panel" style="font-size: 24px;" >
<form id="search-box" method="Post" action="/{{$url}}/get_table">
<div class="search-box">
Выберете устройство :
<select id="select1" name="model">
@foreach($model as $dev)
<option id="opt" value="{{ $dev->id }}" onClick="showhide({{ $dev->id }})">{{ $dev->title }}</option>
@endforeach
</select>
@foreach($model as $dev)
<?php $devicemodel =\App\DeviceModel::checkDM($brand->id,$dev->id);?>
<div id="{{$dev->id}}" style="display: none;" >
@if($devicemodel)
<select name="device">
@foreach($devicemodel as $dev)
@if($dev)
<?php $name =\App\DeviceModel::returnName($dev->device_id)?>
<option value="{{$dev->device_id}}">{{$name->title}}</option>
@endif
@endforeach
</select>
@else
<select name="device">
<option value="0">[--все--]</option>
</select>
@endif
</div>
@endforeach
<input type="hidden" name="brand" value ="{{ $brand->id }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<button class="btn" href="#">Найти</button>
</div>
</form>
</div>
Возможно дело в том что куча select с именем device и вы выводим то что нам надо изменяя свойство display:none , но если изменить имя на например на device_{{$dev->device_id}} как я получу это в POST ? Заранее спасибо .