セレクトボックスで選択した項目を保存したい

Question

前提・実現したいこと

セレクトボックスで選択したものを取得し下の項目に保存していきたいです。
現在挙動としては一つは取得できるのですが保存保持ができる状態ではないです。
現在の挙動

発生している問題

セレクトボックスの保存保持に使う記述がわからない状態です。

該当のソースコード

ご指摘いただいたので修正いたします。

<%= render "shared/header" %>
<main>
    <div class="basket">
        <%= render "food" %>
      <div class="basket-product">
            <h2><span class="badge-primary">選択したテキスト</span></h2>
            <h1><strong><span class="item-quantity"></span>食品名2</strong></h1>
            <h1><strong><span class="item-quantity"></span>食品名3</strong></h1>
      </div>
    </div>
    <aside>
      <div class="summary">
        <div class="summary-total-items"><span class="total-items"></span>各種合計値</div>
        <div class="summary-total">
          <div class="total-title">P</div>
          <div class="total-value final-value" id="basket-total">0</div>
          <div class="total-title">F</div>
          <div class="total-value final-value" id="basket-total">0</div>
          <div class="total-title">C</div>
          <div class="total-value final-value" id="basket-total">0</div>
          <div class="total-title">C</div>
          <div class="total-value final-value" id="basket-total">0</div>
        </div>
        <div class="summary-checkout">
          <button class="checkout-cta">Checkout</button>
        </div>
      </div>
    </aside>
  </main>

<div class="pulldown">

  <select class="mainselect" name="major_list">
    <option class="foods" selected="selected">--食材の種類--</option>
      <%= render "foods" %>
  </select>


  
  <select name="food_list" id="food-select">
    <option class="foods" selected="food-selected">--食材選択--</option>
      <option class="meat" id="">--肉類--</option>
        <%= render "meat" %>
      <option class="seafood" id="">--魚介類--</option>
        <%= render "seafood" %>
      <option class="egg" id="">--卵類--</option>
        <%= render "egg" %>
      <option class="beans">--豆類--</option>
        <%= render "beans" %>
      <option class="milk">--乳類--</option>
        <%= render "milk" %>
      <option class="grain">--穀類--</option>
        <%= render "grain" %>
      <option class="potato">--芋類及び澱粉類--</option>
        <%= render "potato" %>
      <option class="fruit">--果実類--</option>
        <%= render "fruit" %>
      <option class="nuts">--種実類--</option>
        <%= render "nuts" %>
      <option class="mushroom">--キノコ類--</option>
        <%= render "mushroom" %>
      <option class="alga">--藻類--</option>
        <%= render "alga" %>
      <option class="vegetable">--野菜類--</option>
        <%= render "vegetable" %>
      <option class="oils">--油脂類--</option>
        <%= render "oils" %>
      <option class="sugar">--砂糖及び甘味類--</option>
        <%= render "sugar" %>
      <option class="pastry">--菓子類--</option>
        <%= render "pastry" %>
      <option class="drink">--嗜好飲料類--</option>
        <%= render "drink" %>
      <option class="seasoning">--調味料及び香辛料類--</option>
        <%= render "seasoning" %>
      <option class="off-the-shelf">--調理済み流通食品類--</option>
        <%= render "off-the-shelf" %>
  </select>


  <button onclick="hoge();" type="button" class="btn-text">取得</button>

<h2><span class="badge-primary">選択したテキスト</span></h2>
  
  <script>
    $(function(){
  //《selectタグ その①》路線を選択すると呼び出される関数
  $('select[name="major_list"]').change(function(){
  //《selectタグ その①》nameの値を取得
  var line_class = $('select[name="major_list"] option:selected').attr("class");
  console.log(line_class);
　//《selectタグ その②》 子要素タグの個数を数え上げ
  var count = $('select[name="food_list"]').children().length;
  console.log(count);
  for(a=0; a<count; a++){
        var food_list = $('select[name="food_list"] option:eq('+a+')');
　　　　　//《selectタグ その①》で選択した路線と等しいname値を持つoptionタグを表示
        if(food_list.attr("class") === line_class){
          food_list.show();
        } else {
          food_list.hide();
      }
      }
　　　　//《selectタグ その③》 子要素タグの個数を数え上げ
      for(b=0; b<count; b++){
        var status_list = $('select[name="status_list"] option:eq('+b+')');
　　　　　//《selectタグ その②》で選択した駅と等しいname値を持つoptionタグを表示
        if(status_list.attr("class") === line_class){
          status_list.show();
        } else {
          status_list.hide();
      }
      }
  });
});
  </script>
  <script>
    function hoge() { 
    
    var obj = document.getElementById('food-select');
    // 選択されている値の番号を取得
    var idx = obj.selectedIndex;
    // 値を取得
    var txt  = obj.options[idx].text;
    // 表示
    document.getElementsByClassName('badge-primary')[0].textContent = txt;
  }
  </script>
</div>

試したこと

おそらく現在記述しているこのJava Scriptを弄れば可能だとは考えたのですが実際どのように改善すればいいのか調べてもわからずいるところです。

補足情報（FW/ツールのバージョンなど）

最近始めたばかりでどうしたらいいか皆目検討がつかない状態になってしまいました。
何かこうしたらいいよや、こういった記述を使えばいけるんじゃないなど、教授願えればと思います。

Answer 1

回答いただいた記述に全体を変更することで無事に機能することができました。

Answer 2

２段階で食材を選択する部分は割愛して

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#btn').addEventListener('click',()=>{
    view.innerHTML+=s2.value;
  });
});
</script>
<select name="s1" id="s1">
<option value="">--</option>
<option value="肉">肉</option>
<option value="魚">魚</option>
</select>
<select name="s2" id="s2">
<option value="">--</option>
<option value="豚">豚</option>
<option value="牛">牛</option>
</select>
<input type="button" value="取得" id="btn">
<div id="view"></div>

Comments

[ginia3150]

早急の回答ありがとうございます。
この記述は私が記述している
<script>
function hoge() {

var obj = document.getElementById('food-select');
// 選択されている値の番号を取得
var idx = obj.selectedIndex;
// 値を取得
var txt = obj.options[idx].text;
// 表示
document.getElementsByClassName('badge-primary')[0].textContent = txt;
}
</script>

と入れ替えて記述する認識でよろしいでしょうか？

[yambejp]

HTMLさえ書いていない質問ですから入れ替えるのかどうかも判断できません
私の回答で動作が確認できたらそれに合わせた処理を書けばいいのでは？

[ginia3150]

失礼しました。
今後は質問の仕方にも気をつけたいと思います。

[ginia3150]

yambejpさん
先程は失礼しました。
今htmlも含めたコードに更新しましたのでもう一度確認していただけますか？