在另一个选择字段中更改后重新填充的动态选择字段 - Laravel 5.2和JS

时间:2016-03-07 21:34:26

标签: javascript php laravel laravel-5

我正在使用Laravel 5开发一个Web应用程序,并尝试集成一些JS来帮助表单。我希望用户能够在一个选择字段中选择一个类别,此时第二个选择字段应填充该类别中的选项。 (例如,选择一个专业:程序员,艺术家。如果选择了程序员,则第二个选择字段填充:C ++,Java,Python。如果选择“艺术家”,则第二个选择填充with: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没有任何内容。我尝试在该功能中回应一些东西,它没有出现在我的页面上,而技能领域从未填充过。然而,职业选择领域填写得很好。

有关此代码出错的地方的任何想法?

1 个答案:

答案 0 :(得分:1)

使用AJAX点击该URL时需要返回JSON。您不需要HTML。仅使用return response()->json(['data' => ['skills' => $skills]]);返回技能数据,并在填充了所有技能的页面上添加select元素。

哦,ajax数据属性接受一个对象,因此它应该是:data: {id: id}

由于你使用的是Laravel,你的一半代码看起来像是旧式的PHP,当Laravel对这些东西采用更清洁的方法时,它们是无用的。

如果您不熟悉PHP和面向对象编程,我建议您在使用Laravel之前了解它。它将在未来帮助你。

另外,我建议你阅读Laravel文档,按照那里的教程,甚至转到Laracasts并观看Laravel 5 Fundamentals和Laravel From Scratch系列以加快速度与Laravel。