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

Question

我正在使用 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 没有运行任何内容。我尝试在该功能中回显某些内容，但它没有出现在我的页面上，并且技能字段也从未填充。然而，职业选择字段填充得很好。

对这段代码哪里出了问题有什么想法吗？

Answer 1

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

哦，ajax 数据属性需要一个对象，所以它应该是:data: {id: id}

由于您使用的是 Laravel，一半的代码看起来像老式 PHP，当 Laravel 有更简洁的方法来处理这些事情时，这些代码就没用了。

如果您是 PHP 和面向对象编程的新手，我建议您在使用 Laravel 之前先了解一下。这对你以后会有帮助。

此外，我建议您阅读 Laravel文档，按照那里的教程进行操作，甚至转到 Laracasts并观看 Laravel 5 基础知识和 Laravel From Scratch 系列，以快速了解 Laravel。