JavaScript で複数の選択要素から選択された値を取得するにはどうすればよいですか?

複数の選択要素から値を取得する

複数の選択を特徴とするフォーム要素を扱うときの一般的なタスクには、選択された値の抽出が含まれます。これは、ユーザーの設定や選択をキャプチャする必要があるシナリオに特に関連します。

選択された値を抽出するための JavaScript テクニック

選択された値を<選択> multiple 属性を持つ要素を使用する場合、JavaScript は簡単なアプローチを提供します。

<code class="javascript">function getSelectValues(select) {
  var values = [];
  for (var i = 0; i < select.options.length; i++) {
    if (select.options[i].selected) {
      values.push(select.options[i].value || select.options[i].text);
    }
  }
  return values;
}

この関数は を反復処理します。要素のオプションを確認し、選択されているオプションを識別します。オプションが選択されている場合、関数は特定の使用例に応じてその値またはテキストを取得します。結果は、選択した値を含む配列になります。

使用例

次の HTML マークアップを考えてみましょう。

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

<button onclick="
  var select = document.querySelector('select');
  var values = getSelectValues(select);
  alert(values);
">
  Show Selected Values
</button></code>

ボタンがクリックされたとき、getSelectValues 関数が呼び出され、選択された値がアラート ボックスに表示されます。

その他の考慮事項

上記で概説した JavaScript メソッドは、選択された値を取得する信頼性の高い方法を提供します。複数の選択ボックスから。ただし、特定の状況では、value プロパティと text プロパティに関してブラウザ間の互換性の問題が発生する可能性があることに注意してください。ブラウザーの互換性が大きな懸念事項である場合は、一貫した動作を確保するために、jQuery などのライブラリの使用を検討してください。

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

JavaScript jquery html Array if for select using Attribute function this alert

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQuery AJAX で XML をロードする際の「No \'Access-Control-Allow-Origin\' ヘッダー\' エラー」を修正する方法次の記事：jQuery AJAX で XML をロードする際の「No \'Access-Control-Allow-Origin\' ヘッダー\' エラー」を修正する方法

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

• ホームページ

• コース

• に質問

• 私の

• ホームページ
• コース
• 記事
• に質問
• 辞書
• マニュアル
• ダウンロード
• 特集

ホームページ

記事

に質問

コース

特集

ダウンロード

ゲーム

辞書

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）