hi_lili
@hi_lili

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

laravel9 編集画面のプルダウンの値を保持したい。

Q&A

Closed

解決したいこと

・編集画面で行っても値が保持されたままにしたい!
編集画面へ行くと他テーブルと紐づけているDBの値が保持されないまま移ってしまいます。

該当するソースコード


//edit.blade.php
<select  id='company_id' name='company_id' value="{{old('company_id', $item->company_id)}}" >
            @foreach($products as $product)
                <option value="{{$product->id}}">{{$product->company_name}}</option>
            @endforeach
</select>

// コントローラー
public function edit($id)
   {   
       $item = Product::find($id);
       $products = Company::all();
       $hash = array(
        'item' => $item,
        'products' => $products,
       );
       return view('kadai.edit')->with($hash);
   }

   public function henshu($id, Request $request)
   {
       $item = Product::find($request->id);
       $item->fill($request->all())->save();
       return redirect('kadai');
   }

ネットで検索をして色々な方の情報をみましたが、私ではわかりませんでした・・・。
ご教授いただけると幸いです。

0

3Answer

selectタグにvalue属性はありませんが、select要素にはvalueプロパティが存在し、選択されているoption要素のvalueプロパティがselect要素のvalueプロパティとしても読み書き可能です。
JavaScriptでselect要素のvalueプロパティを更新するとその値を持ったoption要素がselected状態になりますので、option選択状態の初期設定として利用できます。

sample.html
<select>
  <option value='a'>A</option>
  <option value='b'>B</option>
  <option value='c'>C</option>
</select>

<script>
document.querySelector('select').value = 'b'; /* <option value='b'>B</option> に対応する要素がselected状態になる */
</script>
2Like

Comments

  1. select要素がmultipleな場合はこんな感じで。

    sample.html
    <select multiple>
      <option value='a'>A</option>
      <option value='b'>B</option>
      <option value='c'>C</option>
      <option value='d'>D</option>
    </select>
    
    <script>
    const selectedValues = ['a', 'c'];
    
    const select = document.querySelector('select');
    if (select) [...select.children].forEach(e => e.selected = selectedValues.includes(e.value));
    </script>
    
  2. @hi_lili

    Questioner

    @diywmk9
    返信遅れてしまい申し訳ありません。

    ご教授ありがとうございます!!
    頂いた内容もテストで致します。

    その後の経過を再度お伝え出来ればと思います!

  3. @hi_lili

    Questioner

    @diywmk9
    回答が遅れてしまい、申し訳ありません:bow:
    結論、モデルにgetCompanyの記述で対応カラムを取得できるようにしたことと、
    問題点だったところもご教授いただいた内容で修正し、編集画面に移っても値を保持したままにすることができました!
    ご教授いただいた内容を、私の回答に全て落とし込めているわけではございませんが、
    いただいたご指摘などがとても勉強になりました。
    今後ともご教授頂けると幸いです。:bow:

    @foreach ($company_lists as $company_list)
                        <option value="{{ $company_list->getCompany() }}" @if($company=='{{ $company_list->getCompany() }}') selected @endif>{{ $company_list->company->company_name }}</option>
                        @endforeach
    

selectタグにvalue属性は無いので、初期状態の設定はinputタグと異なります。

<option> 要素に selected 属性を付けることで、ページが最初に読み込まれたときに既定で選択状態にすることができます。

<select>
  <option value="dog">Dog</option>
  <option value="cat" selected>Cat</option>
</select>
1Like

Comments

  1. @hi_lili

    Questioner

    @blue32a
    再度ご回答ありがとうございます!
    完全に検索していたコードを見誤っておりました・・・。

    ご教授いただいた内容で再度見直し、ご報告できればと思います!
    ありがとうございます!

@blue32a
回答が遅れてしまい、申し訳ありません:bow:
結論、モデルにgetCompanyの記述で対応カラムを取得できるようにしたことと、
問題点だったところもご教授いただいた内容で修正し、編集画面に移っても値を保持したままにすることができました!
本当にありがとうございました:bow:

@foreach ($company_lists as $company_list)
                    <option value="{{ $company_list->getCompany() }}" @if($company=='{{ $company_list->getCompany() }}') selected @endif>{{ $company_list->company->company_name }}</option>
                    @endforeach
0Like

Your answer might help someone💌