ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryはoptionの値を取得し、option_jqueryを操作します。

jqueryはoptionの値を取得し、option_jqueryを操作します。

WBOY
WBOYオリジナル
2016-05-16 17:09:20959ブラウズ

jQuery は Select 要素を取得し、テキストと値を選択します:

コードをコピーします コードは次のとおりです:

$("#select_id").change(function(){//code...}); //項目の 1 つが選択されたときにトリガーされる、Select のイベントを追加します
var checkText=$("# select_id").find("option:selected").text(); //Select で選択されたテキストを取得します
var checkValue=$("#select_id").val( ); //Select で選択された値を取得します。
var checkIndex=$("#select_id ").get(0).selectedIndex; //Select
var maxIndex=$("# select_id option:last").attr("index" ); //Select の最大インデックス値を取得します

jQuery は Select 要素を取得し、Text と Value を設定します:

インスタンス分析:
コードをコピー コードは次のとおりです:

$("#select_id " ).get(0).selectedIndex=1; //選択インデックスを設定します。値が 1 の項目が選択されます。
$("#select_id ").val(4); //選択値を 4 に設定します。項目が選択されています
$("#select_id option[text='jQuery'] ").attr("selected", true); //Select の Text 値を選択された jQuery 項目に設定します

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

分析例:
コードをコピー コードは次のとおりです。

$("#select_id").append( "");選択するオプション (ドロップダウン項目)
$("#select_id").prepend(""); // オプションを挿入します (最初の位置) ) for Select
$("#select_id option:last").remove(); //最大のインデックス値 (最後のもの) を持つ選択オプションから削除
$("#select_id option[index=' 0']").remove(); //Select (最初のオプション) のインデックス値 0 のオプションを削除
$("#select_id option[value='3']").remove(); //Select の Value='3' のオプションを削除
$("#select_id option[text='4']") .remove() //Select の Text='4' のオプションを削除

3 レベルの分類

第 4 レベルの分類:
select name="fourthLevelId" id="fourthLevelId">
🎜>

if($("#thirdLevel").val()!=0){
$("#thirdLevel オプション [value!=0] ]").remove();
}
if($("#fourthLevelId").val()!=0){
$("#fourthLevelId オプション[値!=0]") .remove();
}//これは次のことを意味します: 3 番目のカテゴリを選択する場合: 4 番目のカテゴリにデータがある場合は削除し、データのない 4 番目のカテゴリの製品がデフォルト値である場合。今後AJAX技術を学んでよく使います!


選択の取得:
選択されたテキストの取得:
$("#ddlRegType").find("option:selected").text();
選択されたテキストの取得値:

$("#ddlRegType ").val();

選択されたインデックスを取得:
$("#ddlRegType ").get(0)。 >選択の設定:
選択の設定 選択されたインデックス:
$("#ddlRegType ").get(0).selectedIndex=index;//インデックスはインデックス値です

選択された値の設定:




コードをコピー
コードは次のとおりです: $("#ddlRegType ") .attr ("値","通常"); $("#ddlRegType ").val("通常");
$("#ddlRegType ").get(0).value = 値; >

選択したテキストを設定:



コードをコピー
コードは次のとおりです: var count=$("#ddlRegType オプション").length; for(var i=0;i{ if($("#ddlRegType ").get(0) ).options[i].text == text)
{
$("#ddlRegType ").get(0).options[i].selected = true;
}

$("#select_id option[text='jQuery']").attr("selected", true);


選択オプション項目を設定します。




コードをコピー


コードは次のとおりです:

$("#select_id").append(""); // オプションを追加します
$("#select_id" ) .prepend(""); // 前にオプションを挿入します
$("#select_id option:last").remove() ;最大のインデックス値を持つオプションを削除します
$("#select_id option[index='0']").remove(); //インデックス値が 0 のオプションを削除します
$("#select_id option [value='3']").remove(); //値 3 のオプションを削除
$("#select_id option[text='4']").remove(); //テキストを削除オプション 4 の値をクリアします。

:

$("#ddlRegType ").empty();

jquery は値を取得します:

val()
text()

値を設定
val('ここに値を設定')
コードをコピー コードは次のとおりです:

$("document").ready(function(){
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//すべて選択
})
$("#btn2").click(function) (){
$("[name='checkbox']").removeAttr("checked");//すべての選択をキャンセル
})
$("#btn3").click(function) (){
$("[name='checkbox']:even").attr("checked",'true');//すべての奇数を選択
})
$("# btn4").click(function(){
$("[name='checkbox']").each(function(){//選択を反転
if($(this).attr("checked ")){
$(this).removeAttr("checked");
}
else{
$(this).attr("checked",'true');
}
} )
})
$("#btn5").click(function(){//選択した値を出力します
var str="";
$("[ name='チェックボックス' ][チェック済み]").each(function(){
str =$(this).val() "rn";
//alert($(this).val() );
})
アラート(str);
})
})

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:JQuery_jquery の $.ajax() メソッド パラメータの詳細な説明と適用次の記事:JQuery_jquery の $.ajax() メソッド パラメータの詳細な説明と適用

関連記事

続きを見る