Populate multiple select box with jquery and laravel
Question
I am using laravel and i need to populate multiple select according to what user choose from a database. I have 2 select box, one choose category, then once i choose the category, the second select box is populated with product. Once the second select is populate with product i need to fetch from database all the description of that product and show in a form so it can be modified.
I did a Route:
Route::get('api/dropdown', function(){
$input =Input::get('option');
$prodotti= DB::table('prod')
->join('cat','cat.id_prod','=','prod.id')
->where('cat.id','=',$input)
->select('prod.id as idprod','prod.nome as nomeprod')
->lists('nomeprod','idprod');
return Response::json($prodotti);
});
This should send a response
{{ Form::open(array('url' => 'admin/create/mod', 'files'=> true)) }}
<span>
{{ Form::select('categorie', $categorie,'default', array('id'=> 'a')) }}
<br/>
{{ Form::select('a',array('a'=> 'scegli'),'default', array('id'=> 'b')) }}
Scegli il nome del prodotto
{{Form::text('nome')}}
<br/>
{{Form::label('*Descrizione in Italiano')}}
<br/>
{{Form::textarea('descrizioneit','',array('id'=>'descrizioneit'))}}
{{Form::textarea('descrizioneit','',array('id'=>'previewit', 'readonly'=>'readonly', 'onfocus'=>'this.blur();'))}}
<br/>
{{Form::label('*Descrizione in Inglese')}}
<br/>
{{Form::textarea('descrizioneen','',array('id'=>'descrizioneen'))}}
{{Form::textarea('descrizioneen','',array('id'=>'previewen', 'readonly'=>'readonly', 'onfocus'=>'this.blur();'))}}
<br/>
{{Form::close()}}
This is my javascript
jQuery(document).ready(function($){
$('#a').change(function(){
$.get("{{ URL::to('api/dropdown')}}",
{ option: $(this).val() },
function(data) {
var model = $('#b');
model.empty();
$.each(data, function(element) {
model.html(element);
});
});
});
});
Then i should do another api to populate the textbox with the product description i have chosen?
I would follow this idea but even the firt part of this doesn't work. It seems that my javascript code is ignored.
2 answers
solution1
1 ACCPTED 2014-04-10 15:32:07
The problem lies in how you are filling out your select.
jQuery(document).ready(function($){
$('#a').change(function(){
$.get("{{ URL::to('api/dropdown')}}",
{ option: $(this).val() },
function(data) {
var model = $('#b');
model.empty();
$.each(data, function(index, value) {
model.append($("<option />").val(index).text(value)); });
});
});
});
});
solution2
0 2014-04-10 11:15:29
Ok try to read and analyze this one its more like what you looking for
<?php
require_once('func.inc.php'); //Connection script remember
connect();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testDroplistdown</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p align="center">
<div id="dropdown1div"><select id="dropdown1" name="dropdown">
<?php countryQuery(); ?>
</select></div>
</p>
<br />
<br />
<p align="center">
<div id="dropdown2div"></div>
</p>
<p align="left">
<div id="dropdown3div"></div>
<script type="text/javascript">
$("#dropdown").change(function() {
val = $(this).val();
var html = $.ajax({
url: "dropdown_select.php?dropdown=2&val="+val+"",
async: true,
success: function(data) {
$('#dropdown2div').html(data);
}////////////function html////////
})/////////function ajax//////////
});
</script>
<?php close(); ?>
</p>
</body>
</html>
dropdown_select.php
<?php
require_once('func.inc.php');
connect();
if(isset($_GET['val'])){
$val = $_GET['val'];
$dropdown = $_GET['dropdown'];
}
if($dropdown == '2'){
echo '<select id="dropdown2" name="dropdown2">';
governorateQuery();
echo '</select>';
?>
<script type="text/javascript">
$("#dropdown2").change(function() {
val = $(this).val();
var html = $.ajax({
url: "dropdown_select.php?dropdown=3&val="+val+"",
async: true,
success: function(data) {
$('#dropdown3div').html(data);
}////////////function html////////
})/////////function ajax//////////
});
</script>
} // end if statement
if($dropdown == '3'){
echo '<select id="dropdown3" name="dropdown3">';
specializationQuery();
echo '</select>';
} // end if statement
close();
?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.