JavaScript で複数選択要素から選択された値を取得する方法

複数選択要素から選択されたすべてのオプションを取得する

Web 開発の領域では、選択された値を取得することが一般的な要件です。 JavaScript を使用して複数選択ボックスから。このニーズに対処するために、提供されているソリューションを詳しく見てみましょう。

1 つのアプローチでは、select 要素内のオプションを反復処理し、オプションが選択されているかどうかを確認し、その値を配列に蓄積します。この方法は簡単ですが、特に大きなリストを処理する場合は面倒になる可能性があります。

2 番目の回答で提案されているように、より洗練された解決策には getSelectValues() 関数が含まれます。これは、オプションを効率的にループし、オプションの value 属性またはそのテキスト コンテンツから派生したものであるかどうかに関係なく、選択された値を収集します。

次の例を考えてみましょう。

<code class="html"><select multiple>
  <option>opt 1 text</option>
  <option value="opt 2 value">opt 2 text</option>
</select>

<button onclick="
  var el = document.getElementsByTagName('select')[0];
  alert(getSelectValues(el));
">Show selected values</button></code>

ボタンがクリックすると、getSelectValues() 関数が選択されたオプション値を取得し、アラート ダイアログに表示します。これは、このメソッドの容易さと柔軟性を示しています。

手動反復を選択する場合でも、getSelectValues() 関数を利用する場合でも、複数の選択ボックスから選択された値を取得するための堅牢なソリューションが得られ、アクセスできるようになります。 Web アプリケーションでデータを効果的に操作します。

以上がJavaScript で複数選択要素から選択された値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。