使用 jquery 和 laravel 填充多个选择框
Posted
技术标签:
【中文标题】使用 jquery 和 laravel 填充多个选择框【英文标题】：Populate multiple select box with jquery and laravel 【发布时间】：2014-05-24 00:31:33 【问题描述】：我正在使用 laravel，我需要根据用户从数据库中选择的内容填充多项选择。 我有 2 个选择框，一个选择类别，然后一旦我选择了类别，第二个选择框就会填充产品。 一旦第二个选择填充了产品，我需要从数据库中获取该产品的所有描述并以表格形式显示，以便对其进行修改。
我做了一个路线：
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);
);
这应该会发送响应
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()
这是我的 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);
);
);
);
);
那我应该做另一个 api 来用我选择的产品描述填充文本框吗？
我会遵循这个想法，但即使是第一部分也行不通。 看来我的javascript代码被忽略了。
【问题讨论】：
第一部分是指路线吗？我相信您应该返回 json，因此请尝试return Response::json($prodotti); 并在浏览器中转到该路线。您应该会在屏幕上看到一些文字。
是的，我看到了，可能错误在 javascript 中，我不能很好地使用 jquery。我已经添加了 Json 并且我查询 api/dropdown?option=1 并且我从数据库中得到了正确的响应
好的，所以我要做的是确保您的事件处理程序正常工作。尝试在$('#a').change(function() 之后添加alert('working');，它应该在每次更改时发出警报，以确保它正常工作。
是的，是的，我已经这样做了，我得到了正确的警报，其中选项的值被选择了
可能我以错误的方式访问 jquery 中的数据
【参考方案1】：
好的，试着阅读和分析这篇文章，它更像你要找的东西
<?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();
?>
【讨论】：
【参考方案2】：问题在于您如何填写您的选择。
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)); );
);
);
);
);
【讨论】：
实际上我用 $.each(data, function(index, value) model.append($("").val(index).text(value)); );因为我是从一个列表中填充的，但是你的回答让我走上了正确的道路以上是关于使用 jquery 和 laravel 填充多个选择框的主要内容，如果未能解决你的问题，请参考以下文章
使用 JQUERY 和 AJAX 在 Laravel 分页中重新填充表数据
添加多个字段时，HTML多选下拉菜单Jquery和样式不起作用