TechCodeview

この記事では、jQuery を使用してドロップダウン リストで選択された値を取得する方法を学びます。まず、この記事では jQuery、jQuery selector、jQuery val() メソッドを使用して理解します。その後、さまざまな例を使ってこのトピックを理解していきます。

jQueryってどういう意味ですか？

jQuery は、高速、軽量、小型、そして機能が豊富な JavaScript ライブラリです。

jQuery を使用します。 selected セレクターを val () メソッドと組み合わせて、ドロップダウン リストで選択されたオプション値を検索します。

jQuery のセレクター:

宣言が適用される HTML 要素です。

例えば： 選択、チェックなど。

Selected は、フォームが最初に読み込まれるときのデフォルトの選択肢を指定するために使用されます。

jQueryのval()メソッド:

このメソッドは、フォーム要素の値を取得するか、選択した要素に使用される属性の値を設定するために使用されます。

構文：

 $(selector).val (); 

例：

 $('input: text').val ('javaTpoint!'); 

と タグを含むドロップダウン リスト。

select タグと option タグは、ドロップダウン メニューを作成するために使用されます。これらにより、ユーザーはオプションのリストから 1 つまたは複数の選択肢を選択できます。すべての選択肢が画面に表示されるわけではありませんが、ドロップダウン リストをプルすると表示されます。これらはリストの 1 つの項目のみが表示されるため、スペースを節約するために使用されます。

プルダウンリストを作成するには、 tag の代わりに tag を使用します。ペアのタグは開始タグで始まり、終了タグで終わります。このタグは タグと一緒に使用する必要があります。

構文：

 Text Label-1 Text Label-2 ………………………………………………………………………………………………….. ………………………………………………………………………………………………….. 

タグで使用されるさまざまな属性は次のとおりです。

複数：これは、多数のオプションを受け入れるようにタグを設定するために使用されます。デフォルトでは、ユーザーが選択した 1 つのオプションを取ることができます。複数のオプションを選択するには、ユーザーはオプションをクリックしながらクリックする必要があります。名前：プルダウンリストの名前を指定するために使用します。

タグで使用されるさまざまな属性は次のとおりです。

価値：フォームの送信時に送信される値を指定するために使用されます。タグ内で value 属性が省略された場合は、タイトルの内容が使用されます。選択済み:これは、フォームが最初にブラウザに読み込まれるときに、事前に選択された選択肢を指定するために使用されます。

次の例は、jQuery のドロップダウン リストから選択された値を取得するために使用されます。

例 1:

jQueryのドロップダウンリストから選択された値を取得する方法。

 Get Selected Value in drop-down using jQuery h1 { color: green; } h5 { color: green; } h4 { color: green; } p { color: red; } .select { margin: 40px; width: 60%; height: 300px; padding: 30px; border: 2px solid green; } body { background-color: pink; } $(document).ready (function () { $(&apos;select.country&apos;).change (function () { var selectedCountry = $(this).children(&apos;option:selected&apos;).val(); alert (&apos;You have selected the country - &apos; + selectedCountry); }); }); <p> <b> Get Selected Value in drop-down using jQuery </b> </p> <h4> Select Country from drop-down list: </h4> <br> United States India United Kingdom Brazil Germany <br> <br> <b> Get selected values from list </b> 

説明：

上の例では、 と タグを使用してドロップダウン リストを作成しました。ここで、リストから複数の値を選択して作成すると、 リストから複数の要素を選択してボタンをクリックすると、ドロップダウン リストから選択した要素を含む警告メッセージが表示されます。

 United States India United Kingdom Brazil Germany <br> <br> <b> Get selected values from list </b> 

ここ、

Size ='3' はドロップダウン リストに表示される要素の数を表示するために使用され、multiple はドロップダウン リストから複数の値を選択するために使用されます。

出力：

この例の出力を以下に示します。