ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryを使用してドロップダウンから選択したオプションを正しく取得する方法は?

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

Linda Hamilton
リリース: 2024-12-02 03:45:14
オリジナル
766 人が閲覧しました

How to Correctly Retrieve the Selected Option from a Dropdown using jQuery?

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

jQuery の $( を使用してドロップダウン リストから選択したオプションを取得しようとしたとき"#id").val() メソッドを実行すると、失敗するシナリオが発生する可能性があります。このようなケースの 1 つは、選択されたオプションがドロップダウン自体以外の ID を持つ場合に発生します。

次の HTML コードを考えてみましょう:

<label for="name">Name</label>
<input type="text" name="name">
ログイン後にコピー

この例では、選択されたオプションの ID は「aioConceptName」です。 。」 $("#aioConceptName").val() を使用しても、選択されたオプションの値は返されません。これは、それが特にドロップダウン要素自体に関係するためです。

選択されたオプションを正しく取得するには、次の方法を利用できます。 :

選択したテキストの場合:

var conceptName = $('#aioConceptName').find(":selected").text();
ログイン後にコピー

このコード行は次の内容を取得します選択したオプションのテキスト コンテンツ。

選択した値の場合:

var conceptName = $('#aioConceptName').find(":selected").val();
ログイン後にコピー

このコード行は、選択したオプションの値属性を取得します。

このシナリオで $("#id").val() が失敗する理由は、オプションをクリックしてもドロップダウン自体の値が変更されないためです。代わりに、ドロップダウンの子要素である選択されたオプションに :selected プロパティを追加するだけです。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート