Laravel-jQuery下拉列表显示无法正常工作

Question

我正在使用Laravel-5.8开发一个项目。在项目中，我正在使用JQuery来隐藏和显示div。

Controller

public $rating_points = [
"1" => "Three Star Rating",
"2" => "Four Star Rating",
"3" => "Five Star Rating",
"4" => "Six Star Rating"];

public function create()

  return view('appraisal.ratings.create')->with('rating_points', $this->rating_points);


public function store(Request $request)
        
$rating = AppraisalRating::create([
    'rating_point'               => $request->rating_point,
    'rating_type'               => $request->rating_type,
    'rating_value'              => $request->rating_value,
    'rating_description'        => $request->rating_description,
    'company_id'                => Auth::user()->company_id,
    'created_by'                => Auth::user()->id,
    'created_at'                => date("Y-m-d H:i:s"),
    'is_active'                 => 1,
]);
Session::flash('success', 'Appraisal Rating is created successfully');
return redirect()->route('appraisal.ratings.index');

默认情况下，在加载表单时，只有下拉列表可见，如图所示：

view

       <form  action="route('appraisal.ratings.store')" method="post" class="form-horizontal" enctype="multipart/form-data">
           csrf_field()
                        <div class="form-body">
                            <div id='rating-point'class="row">
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label class="control-label text-right col-md-3">Rating Point<span style="color:red;">*</span></label>
                                        <div class="col-md-9 controls">
                                            <select class="form-control select2" data-placeholder="Choose Rating Value" tabindex="1" name="rating_type[]">
                                                <option value="">Select point</option>
                                                @foreach($rating_points as $k => $rating_point)
                                                    <option value="$k" @if(old("rating_point") == "$k") selected @endif>$rating_point</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>  
                            </div>
                            <div class="row" id="rating-data" style="display: none;">
                                <div class="col-md-4">
                                    <div class="form-group row">
                                        <label class="control-label text-right col-md-3">Rating Type<span style="color:red;">*</span></label>
                                        <div class="col-md-9 controls">
                                            <input  type="text" name="rating_type" placeholder="Enter rating type here" class="form-control" value="old('rating_type')" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group row">
                                        <label class="control-label text-right col-md-3">Rating Value<span style="color:red;">*</span></label>
                                        <div class="col-md-9 controls">
                                            <input  type="number" name="rating_value" placeholder="Rating Value" class="form-control" value="old('rating_value')">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group row">
                                        <label class="control-label text-right col-md-3">Description<span style="color:red;">*</span></label>
                                        <div class="col-md-9 controls">
                                            <input  type="text" name="rating_description" placeholder="Enter rating description here" class="form-control" value="old('rating_description')">
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
          
            <div id="rating-button" style="display: none;">
                &nbsp;&nbsp;&nbsp;<button type="submit" class="btn btn-primary"> trans('global.save') </button>
                <button type="button" onclick="window.location.href='route('appraisal.ratings.index')'" class="btn btn-default">Cancel</button>
            </div>
        </form>

   <script>
    $(document).ready(function($)
    $('#rating-point').on('change', function() 
      if ( this.value == '1')
      //.....................^.......
      
        $("#rating-data").show();
      
      else
      
        $("#rating-button").hide();
      
    );
    );
   </script>

我希望更改后的下拉列表应确定要显示的div标签。这没有发生。 Divs保持隐藏状态。

我该如何解决？

谢谢。