jqueryでドロップダウンボックスの選択値を設定する方法

Web 開発では、ユーザーがいくつかのオプションを選択できるようにするために、ドロップダウン ボックス (選択とも呼ばれます) を使用することが必要になることがよくあります。場合によっては、ドロップダウン ボックスのオプションを事前に設定する必要があります。つまり、ページの読み込み時に特定のオプションが選択されている必要があります。この時点で、jquery を使用してドロップダウン ボックスの選択された値を設定できます。

jquery は一般的に使用される JavaScript ライブラリであり、JavaScript コードの作成を簡素化し、多くの便利な操作メソッドを提供します。 jquery を使用してドロップダウン ボックスの選択値を設定する場合は、まず対応するドロップダウン ボックス要素を取得する必要があります。

ドロップダウン ボックス要素を取得するにはさまざまな方法があり、ドロップダウン ボックスの id 属性、name 属性、class 属性などに応じて取得できます。ドロップダウン ボックスに一意の id 属性がある場合は、以下に示すように、$("#id") を使用してドロップダウン ボックス要素を取得できます。 id 属性がある場合は、$("select [name=selectName]") を使用してドロップダウン ボックス要素を取得できます。selectName はドロップダウン ボックスの name 属性値です。ドロップダウン ボックス要素を取得すると、jquery を使用してドロップダウン ボックスの選択された値を設定できます。 jQuery には、ドロップダウン ボックスの選択された値を設定するための 2 つのメソッド、つまり val() メソッドと prop() メソッドが用意されています。

1. val() メソッドを使用して、ドロップダウン ボックスの選択された値を設定します。

val() メソッドは、ドロップダウン ボックスの値を取得または設定するために使用されます。 。 val() メソッドがパラメータを取らない場合は、現在選択されているオプションの値を取得することを意味し、val() メソッドがパラメータを取る場合は、ドロップダウン ボックスの選択された値を指定された値に設定することを意味します。

次は、val() メソッドを使用してドロップダウン ボックスの選択された値を設定するコード例です。

var selectBox = $("#selectBox");

上記のコードでは、最初に val() メソッドを使用します。ドロップダウン ボックスで現在選択されている値を取得します。次に、val("2") メソッドを使用して、ドロップダウン ボックスの選択された値を "2" に設定します。つまり、値が "2" のオプションを選択します。ドロップダウンボックスで。

2. prop() メソッドを使用して、ドロップダウン ボックスの選択された値を設定します。

prop() メソッドは、要素の属性値を取得または設定するために使用されます。ドロップダウン ボックスの場合、prop("selectedIndex", Index) メソッドを使用して、選択されたオプションを設定できます。このうち、インデックスはドロップダウン ボックス内で選択したオプションの位置を 0 から数えたものです。

以下は、prop() メソッドを使用してドロップダウン ボックスの選択された値を設定するサンプル コードです。

var selectBox = $("select[name=selectName]");

上記のコードでは、最初に prop("selectedIndex ") メソッドを使用して、ドロップダウン ボックスの現在選択されている値を取得します。ドロップダウン ボックス内のオプションの位置を取得し、その後、prop("selectedIndex", 1) メソッドを使用して、ドロップダウン ボックスで選択されているオプションを設定します。ボックスを 2 番目の項目に移動します。

概要

この記事では、jquery を使用してドロップダウン ボックスの選択値を設定する 2 つの方法、val() と prop() を紹介します。 val() メソッドはドロップダウン ボックスの値を設定するために使用され、prop() メソッドはドロップダウン ボックスのプロパティ値を設定するために使用されます。どちらの方法もドロップダウンボックスの選択値を設定する機能を実装するために使用できますが、どちらの方法を使用するかは実際の状況に応じて決定する必要があります。

以上がjqueryでドロップダウンボックスの選択値を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。