jqueryでselectを操作する方法

coldplay.xixi
リリース: 2023-01-04 09:37:02
オリジナル
3500 人が閲覧しました

Jquery 操作の選択方法: 1. 選択する値を pxx に設定します。コードは [$(".selector").val("pxx")]; 2. テキストを含む項目を設定します。 pxx に select する場合、コードは [$(".selector").find("option[te].

jqueryでselectを操作する方法

このチュートリアルの動作環境: Windows7 システム、jquery3.2.1 バージョン、thinkpad t480 コンピューター

関連する無料学習の推奨事項: JavaScript 学習チュートリアル jQuery Tutorial

Jquery 操作選択メソッド:

1. で項目を設定します。 value to pxx to select

$(".selector").val("pxx");
ログイン後にコピー

2. テキストを pxx

$(".selector").find("option[text='pxx']").attr("selected",true);
ログイン後にコピー

に設定した項目を選択します。角括弧が使用されています。角括弧内の等号の前に属性名が付きます。多くの場合、角括弧を使用すると、アプリケーションはロジックを非常に単純にすることができます。

3. 現在選択されている項目の値を取得します

$(".selector").val();
ログイン後にコピー

4. 現在選択されている項目のテキストを取得します

$(".selector").find("option:selected").text();
ログイン後にコピー

ここではコロンが使用されています。その使用法をマスターし、他のケースについての推論もコードを簡潔にします。

多くの場合、select のカスケード、つまり の値が使用されます。 2 番目の選択は、最初の選択で選択された値で変化します。これは jQuery では非常に簡単です。

例:

$(".selector1").change(function(){
// 先清空第二个
$(".selector2").empty();
// 实际的应用中,这里的option一般都是用循环生成多个了
var option = $("<option>").val(1).text("pxx");
$(".selector2").append(option);
});
ログイン後にコピー

jQuery は、Select で選択されたテキストと値を取得します。

構文説明:

1. $("#select_id").change(function(){//code...}); / /項目の 1 つが選択されたときにトリガーされる、Select のイベントを追加します

2. var checkText=$("#select_id").find("option:selected").text( ); //Select で選択されたテキストを取得

3. var checkValue=$("#select_id").val(); //Select で選択された値を取得

4. var checkIndex=$("#select_id ").get (0).selectedIndex; //Select

5.# で選択されたインデックス値を取得します。 ## var maxIndex=$("#select_id option:last").attr("index"); //Select の最大インデックス値を取得します

jQuery は Select で選択された Text と Value を設定します:

構文説明:

1.

$("#select_id ").get(0).selectedIndex=1; //Select インデックス値で項目を設定1 で

2 を選択します。

$("#select_id ").val(4); // 項目

3 を選択するには、選択値を 4 に設定します。

$("#select_id option[text='jQuery']").attr("selected", true) ; //Select の Text 値を jQuery 項目の選択に設定します

jQueryはSelectのOption項目を追加/削除します:

構文説明:

1.

$("#select_id").append(""); //Select

2.

$("#select_id") にオプション (ドロップダウン項目) を追加します。 prepend(""); //オプションの選択に挿入 (最初の位置)

3.

$( "#select_id option:last").remove(); //Select で最大のインデックス値を持つオプション (最後のもの) を削除します

4.

$("#select_id オプション[index='0']").remove(); //Select

5 のインデックス値 0 のオプション (最初) を削除します。

$("#select_id option[value ='3']").remove(); //Select

5 の Value='3' のオプションを削除します。

$("#select_id option[text='4 ']").remove(); //Select

jquery の Text='4' のオプションを削除 ラジオ値、チェックボックスの値、値の選択、ラジオの選択、チェックボックスの選択、選択の選択、および関連

ラジオで選択された項目のグループの値を取得します

var item = $(&#39;input[name=items][checked]&#39;).val();
ログイン後にコピー

選択された項目を取得しますテキスト

var item = $("select[name=items] option[selected]").text();
ログイン後にコピー

選択ドロップダウン ボックスの 2 番目の要素は次のとおりです。現在選択されている値

$(&#39;#select_id&#39;)[0].selectedIndex = 1;
ログイン後にコピー

ラジオラジオ選択グループの 2 番目の要素は現在選択されている値です

$(&#39;input[name=items]&#39;).get(1).checked = true;
ログイン後にコピー
値を取得します:

  • テキスト ボックス、テキスト領域:

    $("#txt").attr("value");

  • 複数選択ボックスのチェックボックス:

    $("#checkbox_id ").attr("値");

  • ラジオ選択グループラジオ:

    $( "input[type=radio][checked]").val( );

  • ドロップダウン ボックスの選択:

    $('#sel').val() ;

コントロールフォーム要素:

テキストボックス、テキストエリア: $("#txt").attr("value",''); //コンテンツをクリアします

$( "#txt").attr("value",'11');//コンテンツを入力します

複数選択ボックスのチェックボックス: $("#chk1" ).attr("checked",'') ;//未チェック

$("#chk2").attr("チェック済み",true);//チェック済み

if($("#chk1").attr('チェック済み')==undefine) //チェック済みかを判定

ラジオグループradio: $("input[type=radio]").attr("checked",'2');//設定現在選択されている項目として value=2 を持つ項目

ドロップダウン ボックスの選択: $("#sel").attr("value",'-sel3');//value=-sel3 の項目を現在選択されている項目として設定します

$("").appendTo("#sel")// のオプションを追加しますドロップダウン ボックス

$("#sel").empty(); //ドロップダウン ボックスをクリア

プログラミング関連の知識については、プログラミングを参照してください。教えます! !

以上がjqueryでselectを操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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