ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery で選択項目を動的に追加・削除する (実装コード)_jquery

jQuery で選択項目を動的に追加・削除する (実装コード)_jquery

WBOY
リリース: 2016-05-16 17:23:49
オリジナル
1090 人が閲覧しました

コードをコピー コードは次のとおりです。

// Add
functioncol_add( ) {
var selObj = $("#mySelect");
var value="value";
var text="text";
selObj.append("");
}
// 削除
functioncol_delete() {
var selOpt = $("#mySelect オプション:選択済み" );
selOpt.remove();
}
// Clear
functioncol_clear() {
var selOpt = $("#mySelect option");
selOpt.remove ();
}

上記のメソッドは、jQuery が動的に選択を追加、削除、クリアするためのものです。以下は純粋な JS の記述方法です:
コードをコピー コードは次のとおりです:

var sid = document.getElementById("mySelect");
sid.options[sid.options.length]=new Option("text","value"); // select の最後に項目を追加します。 >
その他の一般的に使用されるメソッド:

コードをコピー コードは次のとおりです:
$("#mySelect") .change(function(){//code...}) //選択された項目が変更されるとトリガーされます
//選択値を取得します

var text=$("#mySelect").find("option:selected").text() //選択項目のテキストを取得します
var 値=$ ("#mySelect").val(); //選択項目の値を取得します
var value=$("#mySelect option:selected").attr("value"); Select 項目の値 Value
varindex=$("#mySelect").get(0).selectedIndex; //Select オプションのインデックス値を 0 から取得します
varindex=$(" #mySelect オプション:選択済み" ).attr("index"); //使用できません! ! !
var index=$("#mySelect option:selected").index(); //Select オプションのインデックス値を 0 から取得します
var maxIndex=$("#mySelect option:last" ) .attr("インデックス"); //利用できません! ! !
var maxIndex=$("#mySelect option:last").index();//0 から始まる Select の最大インデックス値を取得します
$("#mySelect").prepend(""); //Select
の最初の項目の前に項目を挿入します

//選択値を設定します

//インデックスに従って選択された項目を設定します
$("#mySelect").get(0).selectedIndex=index;//インデックスはインデックス値です
//値に従って、選択された項目が設定されます
$("#mySelect").attr("value","newValue");
$("#mySelect").val("newValue") ;
$(" #mySelect").get(0).value = value
//テキストに従って、対応する項目を選択された項目として設定します
var count=$("#mySelect オプション").length;
for( var i=0;i{
if($("#mySelect").get(0).options[i].text = = テキスト)
{
$("#mySelect").get(0).options[i].selected = true;
ブレーク;
}
}

// 選択をクリアします

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

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