ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryのselect操作制御方法まとめ_jquery
ここでのコードの多くは jquery 1.32 より前のバージョン用であることに注意してください (それ以降のバージョンでは @ がサポートされなくなりました)。そのため、空のコードに置き換えてテストしてください。
jQuery は Select のテキストと値を取得します:
構文の説明:
1. $("#select_id").change(function(){//code)。 ..}); //項目の 1 つが選択されたときにトリガーされる Select のイベントを追加します
2. var checkText=$("#select_id").find("option:selected").text( ); // Select
で選択されたテキストを取得します。 var checkValue=$("#select_id").val(); // Select
で選択された値を取得します。 var checkIndex=$("# select_id ").get( 0).selectedIndex; //Select
5 で選択されたインデックス値を取得します var maxIndex=$("#select_id option:last").attr("index"); / /Select の最大インデックス値を取得します
jQuery は Select のテキストと値を設定します:
構文説明:
1. $("#select_id ").get( 0).selectedIndex=1; / /選択する場合は、選択インデックスの値を 1 に設定します。$("#select_id ").val(4); //選択する場合は、選択する値を 4 に設定します。
3. $("#select_id ") option[text='jQuery']").attr("selected", true); //Select の Text 値を選択した jQuery 項目に設定します
選択オプション項目を追加/削除する jQuery: 構文説明:
1. $("#select_id").append("
Text に追加します。 $("#select_id").prepend("
3. $("#select_id option :last").remove(); //Select (最後のもの) で最大のインデックス値を持つオプションを削除します $("#select_id option [index='0']").remove(); //Select (最初のオプション) のインデックス値 0 のオプションを削除
5. $("#select_id option[value='3']") .remove(); //Select
5 の Value='3' のオプションを削除します。 $("#select_id option[text='4']").remove(); //テキストを含むオプションを削除します='4' in
//オプションをトラバースし、オプションを追加および削除します
function changeShipMethod(shipping){
var len = $("select[@name=ISHIPTYPE] オプション").length
if(shipping.value != "CA") {
$("select[@name=ISHIPTYPE] オプション").each(function(){
if($(this ).val() == 111){
$(this).remove();
}
});
$("
UPS グラウンド
").appendTo($("select[@name=ISHIPTYPE]" ));
}
// ドロップダウン メニューの選択値を取得します
$(#testSelect option:selected').text();
または $("#testSelect").find('option:selected').text(); または $ ("#testSelect").val();
////// ///////////////////// /////////////////////// /////////
記憶力が悪い場合は、保存してください:
1、ドロップダウン ボックス:
var cc1 = $(".formc select[@name='country' ] option[@selected]").text(); // のテキストを取得します。ドロップダウン メニューで選択した項目 (中央のスペースに注意してください)
var cc2 = $('.formc select[@name="country"]' ).val(); // の値を取得します。ドロップダウン メニューで選択された項目
var cc3 = $('.formc select[@name="country"]').attr("id"); // のドロップダウン メニュー ID 属性値を取得します。メニューで選択した項目
$("#select").empty();//ドロップダウン ボックスをクリアします//$("#select").html('');
$( "
1111
").appendTo("#select")// ドロップダウン ボックスのオプションを追加します
少し説明します: を持ち、属性値が 'country' である select 要素内の selected 属性を持つオプション要素を意味します。 @ で始まるものはすべてであることがわかります。属性が後に続くことを意味します。
2, ラジオボタン:
$("input[@type=radio][@checked]").val() //ラジオボタンの選択項目の値を取得します(注)中央 スペースなし)
$("input[@type=radio][@value=2]").attr("checked",'checked') //ラジオ ボタンの value=2 を選択した値に設定します。 state. (間にスペースがないことに注意してください)
3、チェックボックス:
$("input[@type=checkbox][@checked]").val();チェックボックスを選択した状態を取得します 最初の項目の値
$("input[@type=checkbox][@checked]").each(function(){ //通常は複数のチェックボックスが選択されているため、出力はループされる
alert($(this).val());
$("#chk1").attr("checked",'');//チェックを解除
$("#chk2").attr("checked",true);//Tick
if($("#chk1").attr('checked')==unknown){} //チェックされているかどうかを確認します
もちろん、jquery のセレクターは強力です。
ああああ
var item = $('input[@name=items][@checked]' ). val();
select
var item = $("select[@name=items] option[@selected]").text();ドロップダウン ボックスの項目 2 つの要素は現在選択されている値です
$('#select_id')[0].selectedIndex = 1;
ラジオ選択グループの 2 番目の要素は現在選択されている値ですvalue
$('input[@ name=items]').get(1).checked = true;
値の取得:
テキスト ボックス、テキスト領域: $("#txt").attr ("value");
複数のチェックボックス: $("#checkbox_id").attr("value");
ラジオ グループ radio: $("input[@type=radio][@checked]") .val();
ドロップダウン ボックスの選択: $('#sel').val();
コントロール フォーム要素:
テキスト ボックス、テキスト エリア: $("#txt")。 attr("value",'') ;//内容をクリア
$("#txt").attr("value",'11');//内容を埋める
複数選択ボックス チェックボックス: $( "#chk1").attr(" selected",'');//未チェック
$("#chk2").attr("checked",true);//チェックあり
if($(" #chk1").attr ('checked')==unknown) //
ラジオ グループ radio がチェックされているかどうかを判断します: $("input[@type=radio]").attr("checked",' 2');// value=2 の項目を現在選択されている項目として設定します
ドロップダウン ボックス select: $("#sel").attr("value",'-sel3');//Set現在選択されている項目として value=-sel3 を持つ項目
$("
1111
2222
var item = $( 'input[@name=items][@checked]').val();
select
var item = $("select[@name=items] option[@ selected]").text();
選択ドロップダウン ボックスの 2 番目の要素は、現在の選択値です
$('#select_id')[0].selectedIndex = 1;
2 番目の要素ラジオラジオ選択グループの要素は現在選択されている値です
$('input[@name=items]' ).get(1).checked = true
値の取得:
テキスト ボックスエリア: $("#txt").attr("value");
複数選択ボックス チェックボックス: $("#checkbox_id").attr("value");
ラジオ選択グループ radio: $( "input[@type=radio][@checked]").val();
ドロップダウン ボックスの選択: $('#sel').val();
コントロール フォーム要素:
テキストボックス、テキストエリア: $("#txt").attr("value",'');//内容をクリア
$("#txt").attr("value",'11') ;//内容を記入
複数選択ボックス チェックボックス: $("#chk1").attr("checked",'' );//未チェック
$("#chk2").attr("checked" ,true);//Checked
if($("#chk1").attr('checked') ==unknown) //
ラジオ グループ radio がチェックされているかどうかを判断します: $("input[@ type=radio]").attr("checked",'2');//Set value=2 項目は現在選択されている項目です
ドロップダウン ボックスの選択: $("#sel").attr( "value",'-sel3');//項目設定 value=-sel3 は現在選択されている項目です
$( "
1111
2222$("#sel").empty();//ドロップダウン ボックスをクリアします詳細については、を参照してください。以下の記事:
Jquery Select操作方法集 スクリプトハウス特別編