検索

ホームページ  >  記事  >  ウェブフロントエンド  >  select_jquery で選択されたテキストと値を取得する jQuery の例

select_jquery で選択されたテキストと値を取得する jQuery の例

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

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

選択された値の取得:
$(" #ddlregtype ").val();

選択されたインデックスを取得します:
$("#ddlregtype ").get(0).selectedindex;

選択を設定します:
選択されたインデックスを設定します:
$("#ddlregtype ").get(0).selectedindex=index;//インデックスはインデックス値です

選択された値を設定します:

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

$("#ddlregtype ").attr("value" ,"normal) ");
$("#ddlregtype ").val("normal");
$("#ddlregtype ").get(0).value = 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;
break
}
}
$("#select_id option[text='jquery']").attr("selected", true);

選択オプション項目を設定します:
コードをコピー コードは次のとおりです:

$("#select_id").append(""); // In 前にオプションを挿入します
$("#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();

この作業では、2 つの形式で値を取得する必要があります。図に示すように:

左側の選択ボックスから右側の選択ボックスに追加された値を取得するにはどうすればよいですか?これを実現するために Web ページの特殊効果を使用することを考えましたが、ここではより一般的な jQuery が使用されました。
js コードは次のとおりです:
コードをコピー コードは次のとおりです:

//すべての属性を取得 Value var item = $("#select1").val();
$(function(){
$('#select1').each( //すべての値を取得of select1
function( ){
$('button').click(function(){
alert($('#select2').val()); //select1 の値を取得in select2
});
});


として直接記述することはできないことに注意してください。

コードをコピー コードは次のとおりです:
$(function(){
$(' #select2').each( // select1 のすべての値を取得します。前述したように、オプションは左から右に追加されるため、jquery は実際には左から右に値を渡しません。 (){
$('button').click(function(){
alert($(this).val()); //select2 の select1 の値を取得します
}); >});
})


html:



コードをコピー
コードは次のとおりです以下:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JS連聯館ソースコード完全アノテーション版（推奨）_javascriptスキル次の記事：JS連聯館ソースコード完全アノテーション版（推奨）_javascriptスキル

関連記事

続きを見る