jQueryを使用してドロップダウンから選択したオプションを確実に取得する方法

jQuery を使用してドロップダウンから選択したオプションを取得する

ドロップダウン メニューを使用する場合、選択したオプションを正確に取得することが重要です。 $("#id").val() は通常この目的で使用されますが、特定のシナリオでは予期しない結果が返される可能性があります。

問題:

特定の場合、$("#id").val() を使用すると、特にドロップダウンに id 属性がある場合、選択したオプションの値が返されないことがあります。割り当てられました。次の HTML コードの例を考えてみましょう。

<label for="name">Name</label>
<input type="text" name="name">

このシナリオでは、$('#aioConceptName').val() を使用すると空の文字列が返されます。

解決策:

ドロップダウンから選択したオプションを正確に取得するには、少し異なるアプローチを使用する必要があります。要件に応じて、選択したテキストまたは値を取得できます。

選択したテキストの取得:

選択したオプションのテキストを取得するには、次のコード:

var conceptName = $('#aioConceptName').find(":selected").text();

選択項目の取得値:

選択したオプションの値を取得するには、少し異なるコードを使用します:

var conceptName = $('#aioConceptName').find(":selected").val();

このシナリオで val() が機能しない理由は次のとおりです。オプションをクリックしても、ドロップダウン自体の値は変更されません。代わりに、ドロップダウンの子要素である selected オプションに :selected プロパティを追加します。したがって、find(":selected") を使用して特定のオプションを選択し、それに応じてそのテキストまたは値を取得する必要があります。

以上がjQueryを使用してドロップダウンから選択したオプションを確実に取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。