Jquery Select操作方法収集スクリプトホーム特別編_jquery

jQuery フレームワークを使用すると、HTML 要素の操作が簡単になります。最初は Select 操作に慣れていたつもりでしたが、午前中のテストで実際にはあまり知らないことに気づきました。

jQuery のいくつかのメソッドを確認した後、一般的に使用されるメソッドをいくつか整理しました。以下にリストします。

//最初のオプションの値を取得します
$('#test option:first').val();
//最後のオプションの値
$('#test option:last').val();
//2 番目のオプションの値を取得option
$('#test option:eq(1)').val();
//選択された値を取得します
$('#test').val(); ( '#test option:selected').val();
//値 2 のオプションを選択状態に設定します
$('#test').attr('value','2') ;
//最初のオプションを選択するように設定します
$('#test option:last').attr('selected','selected');
$("#test") (' 値' , $('#test オプション:last').val());
$("#test").attr('value' , $('#test オプション').eq($ (' #test option').length - 1).val());
//select
$('#test option').length>//オプションを追加します。
$("#test").append("
ff
"); $("ff
").appendTo("#test"); >// 選択した項目の追加と削除$('#test option:selected').remove(); // 指定した項目を選択します
$('#test option:first')。 Remove();
//指定された値が削除されます
$('#test option').each(function(){
if( $(this).val() == '5' ){
$(this).remove();
}
});
$('#test option[value=5]').remove(); >//最初のグループのラベルを取得します
$('#test optgroup:eq(0)').attr('label');
//2 番目のグループの最初のオプションの値を取得します
$('# test optgroup:eq(1) :option:eq(0)').val();


select と value で選択したテキストに関連する値を取得します


select で選択されたテキストを取得します: var checkText=$("#slc1").find("option:selected").text();
select で選択された値を取得します: var checkValue =$("#slc1"). val(); select で選択されたインデックス値を取得します: var checkIndex=$("#slc1 ").get(0).selectedIndex; 最大のインデックス値を取得します。 of select: var maxIndex=$("#slc1 option:last").attr("index");


選択したテキストと値を設定します


選択インデックス値 1 の項目を選択します: $( "#slc1 ").get(0).selectedIndex=1;
項目を選択するには、select の値を 4 に設定します: $("#slc1 ").val (4); select JQuery の Text 値を設定します: $("#slc1 option[text='jQuery']").attr("selected", true); 3 番目の項目の使用には特に注意してください。 JQuery のセレクター関数がいかに強力であるかを見てください。


オプション項目の追加と削除


オプション (ドロップダウン項目) を追加して選択します
$("#slc2").append("
" i ""); select
$("#slc2").prepend("
Please select
"); PS : prepend これは、一致するすべての要素の先頭にコンテンツを挿入する最良の方法です。 選択内の最大のインデックス値を持つオプション (最後のもの) を削除します。
$("#slc2 option:last").remove();
選択内のインデックス値 0 を持つオプションを削除します。 select (最初のもの) $("#slc2 option[index='0']").remove(); select の value='3' のオプションを削除します
$("# slc2 option[value='3' ]").remove();
select の text='4' のオプションを削除
$("#slc2 option[text='3']").remove ();

関連補足情報:

js プラグインを使用すると JQuery Select 操作が簡単で便利


JQuery select タグ操作コード セグメント