複数選択ドロップダウン ボックスを使用して要素を動的に表示する

この記事では、JavaScript と HTML を使用して複数選択ドロップダウン ボックスを実装し、ユーザーの選択に基づいて対応する HTML 要素を動的に表示する方法を紹介します。ユーザーが複数のオプションを選択したときに、その後の選択によって要素が非表示になることを避けるために、以前に選択した要素を表示し続ける方法に焦点を当てています。一般的な問題を分析し、複数選択ドロップダウン ボックスが適切に機能するための解決策を提供します。

複数選択ドロップダウン ボックスの動的な表示要素を実装する

Web 開発では、ユーザーの選択に基づいて特定の要素を動的に表示または非表示にすることが必要になることがよくあります。この機能を実現するには、複数選択ドロップダウン ボックスを使用することが一般的な要件です。ここでは、JavaScript と HTML を使用してこの機能を実装する方法の詳細な手順と考慮事項を説明します。

HTML構造

まず、複数選択のドロップダウン ボックスと、動的に表示する必要がある 1 つ以上の div 要素を含む HTML 構造が必要です。

 <div class="フォームグループ">
  <label for="FileName">イベント名</label>
  <select id="select" multiple onchange="showDiv()">
    <optgroup label="平日">
      <option value="1">毎日</option>
      <option value="2">月曜日</option>
      <option value="3">火曜日</option>
      <option value="4">水曜日</option>
      <option value="5">木曜日</option>
      <option value="6">金曜日</option>
      <option value="7">土曜日</option>
      <option value="8">日曜日</option>
    </optgroup>
  選択>
</select>
</div>

<!-- 毎日 -->
<div class="form-group" id="hidden_​​div1" style="display: none;">
  <label for="FileName">毎日</label>
  <input type="text" class="form-control" id="name" name="name">
</div>

<!-- 月曜日 -->
<div class="form-group" id="hidden_​​div2" style="display: none;">
  <label for="FileName">月曜日</label>
  <input type="text" class="form-control" id="name" name="name">
</div>

<!-- その他の div 要素 -->

この例では、 を使用して複数選択のドロップダウン ボックスを作成し、onchange イベントを使用して JavaScript 関数 showDiv() をトリガーします。各 div 要素には一意の ID があり、初期状態は非表示 (style="display: none;") です。

JavaScriptコード

次に、ドロップダウン ボックスの選択イベントを処理し、対応する div 要素を動的に表示または非表示にする JavaScript コードを作成する必要があります。

実装方法が間違っています (最後に選択された要素のみが表示されます)

以下はよくある間違った実装で、最後に選択された要素のみを表示します。

関数 showDiv() {
  getSelectValue = document.getElementById("select").value;
  if (getSelectValue == "1") {
    document.getElementById("hidden_​​div1").style.display = "ブロック";
  } それ以外 {
    document.getElementById("hidden_​​div1").style.display = "none";
  }
  if (getSelectValue == "2") {
    document.getElementById("hidden_​​div2").style.display = "ブロック";
  } それ以外 {
    document.getElementById("hidden_​​div2").style.display = "none";
  }
  // その他の if...else ステートメント}

このコードの問題は、showDiv() 関数が呼び出されるたびに、すべてのオプションを反復処理し、現在選択されている値に基づいて対応する div 要素を表示または非表示にすることです。 else ステートメントの存在により、選択されていない div 要素は非表示になり、最後に選択された要素のみが表示されます。

正しい実装方法 (選択された要素をすべて表示)

この問題を解決するには、else ステートメントを削除し、毎回表示ロジックのみが処理され、非表示ロジックは処理されないようにする必要があります。

関数 showDiv() {
  const selectElement = document.getElementById("select");
  const selectedValues = Array.from(selectElement.selectedOptions).map(option => option.value);

  // すべての div を非表示にする
  for (let i = 1; i  {
    const divId = `hidden_​​div${値}`;
    const div = document.getElementById(divId);
    if (div) {
      div.style.display = "ブロック";
    }
  });
}

このコードは、最初に選択されたすべての値を取得し、次にこれらの値を反復処理して、対応する div 要素を表示します。 else ステートメントを削除すると、以前に選択した要素が表示されたままになります。さらに、ロジックの正確性を確保するには、最初にすべての div を非表示にしてから、選択した div を表示する必要があります。

注意事項

1. ID の一意性: JavaScript コードが正しく検索できるように、各 div 要素の ID が一意であることを確認してください。
2. 初期状態:動的に表示する必要があるすべての div 要素の初期状態が非表示であることを確認します (style="display: none;")。
3. イベント処理: onchange イベントを使用して JavaScript 関数をトリガーし、ドロップダウン ボックスの値が変更されたときにコードが間に合うように実行できるようにします。
4. コードの最適化:ループを使用すると、コードを簡素化し、繰り返されるコードの量を減らすことができます。

要約する

上記の手順により、複数選択のドロップダウン ボックスを実装し、ユーザーの選択に応じて対応する HTML 要素を動的に表示できます。重要なのは、JavaScript の実行ロジックを理解し、選択されていない要素を非表示にするために else ステートメントを使用しないようにすることです。合理的な HTML 構造と JavaScript コードを通じて、完全に機能し、保守が容易な複数選択ドロップダウン ボックスを実装できます。

以上が複数選択ドロップダウン ボックスを使用して要素を動的に表示するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。