我有两个选择(下拉列表),第二个是基于第一个用ajax填充的。现在我希望当我从第二个选项中选择一个选项来显示该值(或id)的详细信息或细节时。我所做的是显示该列的所有记录(img_path
)。
<div class="row">
<form>
<div class="form-group col-md-3 col-md-offset-4">
<select class="form-control" id="firstDropDown" name="selectCategory" onchange="change_category(this.value);">
<option>Choose Category...</option>
@foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->category_name }}</option>
@endforeach
</select>
</div>
<div class="form-group col-md-3 col-md-offset-4">
<select class="form-control" id="secondDropDown">
<option>Choose Layer...</option>
</select>
</div>
</form>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-4">
<div class="gravataroverlay">
<div id="gravatarsidebar">
<img src="img/body.png">
</div>
</div>
</div>
</div>
public function populateImages(){
$input = Input::get('option');
$maker = Layer::find($input);
return Response::make($maker->get(array('id','img_path')));
}
jQuery(document).ready(function($){
$('#secondDropDown').change(function(){
$.get("{{ url('populate/images')}}",
{ option: $(this).val() },
function(data) {
var model = $('#gravatarsidebar');
model.empty();
$.each(data, function(index, element) {
//model.append("<option value='"+ element.id +"'>" + element.layer_name + "</option>");
model.append("<img src='img/"+ element.img_path +"' id='" +element.id+ "'>");
});
}
);
});
});