jQueryを使用したドロップダウンの選択における2つのドロップダウンの連動

まず、HTMLフォームに2つのドロップダウンメニューを作成します。例えば、以下のようなコードを使用します:

<select id="dropdown1">
  <option value="option1">オプション1</option>
  <option value="option2">オプション2</option>
  <option value="option3">オプション3</option>
</select>
<select id="dropdown2">
  <!-- 最初は空の状態で表示する -->
</select>

次に、jQueryを使用してドロップダウンの選択イベントを監視し、連動させるコードを追加します。以下の例では、最初のドロップダウンが変更された時に、選択された項目に基づいて2つ目のドロップダウンの内容を動的に更新しています。

$(document).ready(function() {
  // 最初のドロップダウンの変更イベントを監視
  $('#dropdown1').change(function() {
    var selectedOption = $(this).val(); // 選択された項目の値を取得
    // 2つ目のドロップダウンの内容をクリア
    $('#dropdown2').empty();
    // 選択された項目に応じて、2つ目のドロップダウンの内容を追加
    if (selectedOption === 'option1') {
      $('#dropdown2').append('<option value="suboption1">サブオプション1</option>');
      $('#dropdown2').append('<option value="suboption2">サブオプション2</option>');
    } else if (selectedOption === 'option2') {
      $('#dropdown2').append('<option value="suboption3">サブオプション3</option>');
    } else if (selectedOption === 'option3') {
      $('#dropdown2').append('<option value="suboption4">サブオプション4</option>');
      $('#dropdown2').append('<option value="suboption5">サブオプション5</option>');
      $('#dropdown2').append('<option value="suboption6">サブオプション6</option>');
    }
  });
});

上記のコードでは、最初のドロップダウンが変更されると、関数が実行されて選択された項目に応じて2つ目のドロップダウンの内容が動的に変更されます。選択された項目によって異なるオプションを追加する場合は、条件分岐を適宜追加してください。

このようにすることで、2つのドロップダウンメニューを連動させることができます。ユーザーが最初のドロップダウンで選択を変更すると、2つ目のドロップダウンの内容が自動的に更新されます。

以上が、jQueryを使用して2つのドロップダウンメニューを連動させる方法の簡単な例です。この方法を応用して、さまざまなシナリオでドロップダウンの連動を実現することができます。