我正在使用Laravel 5开发一个Web应用程序,并尝试集成一些JS来帮助表单。我希望用户能够在一个选择字段中选择一个类别,此时第二个选择字段应该填充该类别中的选项。(例如,选择一个职业:程序员、艺术家。如果选择了"程序员",则第二个选择字段将填充:C++,Java,Python。如果选择了"艺术家",则第二个选择将填充:Photoshop,Illustrator,MS Paint。
请注意,我需要从数据库中填充这些字段。我已经在网上找到了我试图做的事情的例子,我试图适应我的情况。我正在使用的那个在这里:http://www.9lessons.info/2010/08/dynamic-dependent-select-box-using.html 但我无法让它工作(它相当旧 - 从 2010 年开始)。
这是我的HTML和JS:
<!-- JS -->
<script type="text/javascript">
$(document).ready(function()
{
$("#field_main").change(function()
{
var id = $(this).val();
var fields="";
$.ajax
({
type: "POST",
url: "ajax_field.php",
data: {id: id},
cache: false,
success: function(data)
{
$.each(data,function(index,field)
{
fields+="<option value='"+field.id+"'>"+field.field+"</option>";
});
$("#field").html(fields);
}
});
});
});
</script>
<!-- Create the first select field, this part of the code works fine -->
<label>Area :</label>
<select name="field_main" id="field_main">
<option selected="selected">--Select Area--</option>
<?php
$areas = App'Area::all();
foreach($areas as $area){
echo "<option value='"" . $area->id . "'">" . $area->area . "</option>";
}
?>
</select>
<!-- Create the second select field; this part is not working -->
<label>Field :</label>
<select name="field" id="field">
<!--<option selected="selected">--Select Field--</option>-->
</select>
下面是ajax_field.php的样子:
<?php
namespace App'Http'Controllers;
use DB;
if($_POST['id'])
{
$id = $_POST['id'];
$fields = DB::table('fields')->where('area_ref', $id)->get();
return response()->json(['data' => ['fields' => $fields]]);
}
?>
据我所知,没有什么是ajax_skill.php的。我尝试在该函数中回显一些内容,但它没有出现在我的页面上,并且技能字段永远不会填充。但是,职业选择字段填充正常。
关于这段代码出错的地方有什么想法吗?
使用 AJAX 命中该 URL 时需要返回 JSON。您不需要 HTML。仅返回带有return response()->json(['data' => ['skills' => $skills]]);
的技能数据,并在填充了所有技能的页面上添加选择元素。
哦,ajax 数据属性接受一个对象,所以它应该是:data: {id: id}
因此您的一半代码看起来像老式的PHP,当Laravel对这些事情有更清洁的方法时,这是无用的。
如果你不熟悉PHP和面向对象编程,我建议你在使用Laravel之前先学习一下。它将在未来为您提供帮助。
另外,我建议您阅读Laravel文档,按照那里的教程进行操作,甚至去Laracasts观看Laravel 5 Fundamentals和Laravel From Scratch系列,以快速了解Laravel。