使用 AJAX 和 Laravel 5.8 的动态依赖选择选项

Posted 2023-02-19

【中文标题】使用 AJAX 和 Laravel 5.8 的动态依赖选择选项

【英文标题】：Dynamic dependent select option using AJAX and Laravel 5.8

【发布时间】：2019-12-18 14:02:07

【问题描述】：

我实际上是在尝试根据区域获取城市的动态相关选择选项，并且在我的控制器中，我正在返回一个字符串（使用 echo），但不幸的是，该字符串未在浏览器的选择选项（城市）中呈现.但我可以通过检查或在控制台上打印来看到它。

我的 jquery：

    <script >
    $(document).ready(function()

     $('.dynamic').change(function()
      if($(this).val() != '')
      
       var select = $(this).attr("id");
       var value = $(this).val();
       var dependent = $(this).data('dependent');
       var _token = $('input[name="_token"]').val();
       $.ajax(
        url:" route('dynamicdependent.fetch') ",
        method:"POST",
        data:select:select, value:value, _token:_token, dependent:dependent,
        success:function(result)
        
         $('#cityName').html(result);
         console.log(result);

             console.log(result);
        

       )
      
     );

     $('#RegionName').change(function()
      $('#cityName').val('');
     );

    );
    </script>

：我的控制器

class DynamicDependent extends Controller


    public function fetch(Request $request)
       
      $select = $request->get('select');
      $value = $request->get('value');
      $dependent = $request->get('dependent');

      $data = city::where($select,$value)->get();

     $output = '<option value="">Select '.ucfirst($dependent).'</option>';
     foreach($data as $row)
     
      $output .= '<option value="'.$row->$dependent.'">'.$row->$dependent.'</option>';
     
     echo $output;
    

：没有错误消息

这是实际输出的图片：

【参考方案1】：

我怀疑响应可能不是那么好。

尝试返回正确的响应，而不是回应自己。

// other code in the controller ...

return response()->json($output);

如果没有帮助，请在浏览器/控制台中包含您得到的实际响应。

【讨论】：

谢谢。实际上我正在使用引导选择库，当我从城市的选择标签中删除这个类时，有一个名为 selectpicker 的类它工作正常

啊，我明白了。这种自定义选择的问题是，它们在创建时从真正的选择元素中获取数据，但不会观察它的变化。在这些情况下，您可以销毁并重新创建自定义 selectpicker，或者可能有一个专用方法将 selectpicker 与更改同步。

【参考方案2】：

谢谢。实际上我正在使用引导选择库，当我从城市的选择标签中删除这个类时，有一个名为 selectpicker 的类，它工作正常

【讨论】：

如果是这个插件，这里有一个方法，你应该在更改选项时使用：developer.snapappointments.com/bootstrap-select/methods/…