Laravel - Как скрыть элемент div на основе значения выпадающего списка

Question

У меня есть этот Laravel -5,8 код в моем проекте веб-приложения

Контроллер

public function create()
{
  $userCompany = Auth::user()->company_id;   
  $goaltypes   =       AppraisalGoalType::where('company_id', $userCompany)->get(); 
  $categories = AppraisalGoalType::with('children')->where('company_id', $userCompany)->whereNotNull('parent_id')->get();

return view('goals.create')
        ->with('goaltypes', $goaltypes)
        ->with('categories', $categories);
}

блэйд вида

 <form  action="{{route('goals.store')}}" method="post" class="form-horizontal" enctype="multipart/form-data">
       {{csrf_field()}}
       <div class="card-body">
        <div class="form-body">
        <div class="row">
            
          <div class="col-12 col-sm-6">
            <div class="form-group">
              <label class="control-label"> Goal Type:<span style="color:red;">*</span></label>
              <select class="form-control" name="goal_type_id">
                <option value="">Select Goal Type</option>

                @foreach ($categories as $category)
                  <option value="{{ $category->id }}" {{ $category->id == old('category_id') ? 'selected' : '' }}>{{ $category->name }}</option>

                  @if ($category->children)
                    @foreach ($category->children as $child)
                      <option value="{{ $child->id }}" {{ $child->id == old('category_id') ? 'selected' : '' }}>&nbsp;&nbsp;{{ $child->name }}</option>
                    @endforeach
                  @endif
                @endforeach
              </select>
            </div>
          </div>    
            
    <div class="col-md-12">
      <div class="card card-outline card-info">
        </div>
        <!-- /.card-header -->
        <div class="card-body pad">
          <div class="mb-3">
            <textarea class="textarea" name="goal_description" rows="15" placeholder="Enter goal description here ...
                      style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
          </div>

        </div>
      </div>
     </div>

Раскрывающийся список - это внешний ключ, полученный из другой таблицы.

Чего я хочу добиться, так это изменения,

если {{$ child-> name}} равен "Simon"

Тогда div для textarea из goal_description должно быть скрыто.

Как мне добиться этого?

Спасибо.

Answer 1

С помощью Jquery вы можете сделать это:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
<script>       
    $(document).ready(function () {              
    $('select').on('change', function() {
                    if( this.value === 'Simon') $('.textarea').hide();
                });
    });
</script>

Пояснения:

Первый скрипт загружает библиотеку ie Jquery на страницу Второй После того, как dom будет готов, событие выбора onchange вызовет сравнение текущего значения с Simon, если оно равно, текстовое поле будет скрыто.