JSFiddle - React, Tailwind, and code Playground

HTML

<div id="radio-box-wrap" class="radio-box-wrap">
  <div class="radio-box">
    <input type="radio" name="boundSelect" value="out" checked="checked" id="outbound">
    <label for="outbound" class="radio-box__label">下り（京都～大阪）</label>
  </div>
  <div class="radio-box">
    <input type="radio" name="boundSelect" value="in" id="inbound">
    <label for="inbound" class="radio-box__label">上り（大阪～京都）</label>
  </div>
</div>

<!--div class="radio-box"のinput にcheckがあるか無いかで表示を切り変えたい要素。-->
<div id="box_out" class="box_out"> <!-- ページ読み込み時は表示させておくため、noneを削除しました -->
  <select>
    <option value="out_1">2023年1月13日</option>
    <option value="out_2">2023年1月24日</option>
    <option value="out_3">2023年2月3日</option>
  </select>
</div>
<div id="box_in" class="box_in" style="display:none">
  <select>
    <option value="in_1">2023年1月15日</option>
    <option value="in_2">2023年1月26日</option>
    <option value="in_3">2023年325日</option>
  </select>
</div>

JavaScript

// 要素の取得
const radioWrapper = document.getElementById('radio-box-wrap');

// イベントリスナーの設定（要素が変化した時に、toggleBox関数を実行）
radioWrapper.addEventListener('change', toggleBox);

// 要素のdisplay:block/hideを切り替える関数
function toggleBox(event) {
  // 選択されたラジオボタンのvalueを取得
  const currentRadioVal = event.target.value;
  // その反対のvalueを代入（↑がinではなかったら、inを代入。inだったらoutを代入）
  const anotherVal = currentRadioVal !== 'in' ? 'in' : 'out';

  // セレクトボックス2つを取得
  const elementToShow = document.getElementById(`box_${currentRadioVal}`);
  const elementToHide = document.getElementById(`box_${anotherVal}`);

  // それぞれblockとnoneを設定する
  elementToShow.style.display = 'block';
  elementToHide.style.display = 'none';
}