jquery 操作選択インスタンスの完全なコレクション

この記事では、

jQuerySelectで選択されたTextとValueの取得、jQueryによるSelectのOption項目のSelect操作の追加/削除、値の取得と代入方法の実現、選択されたメソッドの設定についてまとめ、対応する説明もございます。

jQueryはSelectで選択されたTextとValueを取得します:

構文説明:

$("#select_id").change(function(){//code...});    //为Select添加事件，当选择其中一项时触发   
var checkText=$("#select_id").find("option:selected").text();   //获取Select选择的Text   
var checkValue=$("#select_id").val();   //获取Select选择的Value   
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;   //设置Select索引值为1的项选中   
$("#select_id ").val(4);    //设置Select的Value值为4的项选中   
$("#select_id option[text='jQuery']").attr("selected", true);    //设置Select的Text值为jQuery的项选中

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

構文説明:

$("#select_id").append("<option value=&#39;Value&#39;>Text</option>");   //为Select追加一个Option(下拉项)   
$("#select_id").prepend("<option value=&#39;0&#39;>请选择</option>");   //为Select插入一个Option(第一个位置)   
$("#select_id option:last").remove();   //删除Select中索引值最大Option(最后一个)   
$("#select_id option[index=&#39;0&#39;]").remove();   //删除Select中索引值为0的Option(第一个)   
$("#select_id option[value=&#39;3&#39;]").remove();   //删除Select中Value=&#39;3&#39;的Option   
$("#select_id option[text=&#39;4&#39;]").remove();   //删除Select中Text=&#39;4&#39;的Option

jqueryはselectドロップダウンの値の取得と代入を実装しますボックスにチェックを入れ、選択したメソッド Encyclopedia を設定します。

例:

1.

$(".selector").val("pxx");

を選択するには、値を含む項目をpxxに設定します。2.

$(".selector").find("option[text='pxx']").attr("selected",true);

を選択するには、テキストを含む項目を設定します。
ここでは、括弧を使用する場合、角括弧内の等号の前に引用符を付けずに

属性

名を置きます。 多くの場合、角括弧を使用するとロジックが非常に単純になります。
3. 現在選択されている項目の値を取得します

$(".selector").val();

4. 現在選択されている項目のテキストを取得します

$(".selector").find("option:selected").text();

ここではコロンが使用されており、その使い方をマスターし、他のケースについても推論を行うとコードが簡単になります。 。

選択のカスケードがよく使用されます。つまり、2 番目の選択の値が、最初の選択で選択された値に応じて変化します。

これはjQueryでは非常に簡単です。

$(".selector1").change(function(){ 
// 先清空第二个 
$(".selector2").empty(); 
// 实际的应用中，这里的option一般都是用循环生成多个了 
var option = $("<option>").val(1).text("pxx"); 
$(".selector2").append(option); 
});

選択オプションにValue="paraValue"のアイテムがあるかどうかを確認します

選択オプションにアイテムを追加します

選択オプションからアイテムを削除します
選択オプションで選択されているアイテムを削除します
値を変更します=選択オプションのテキスト「paraValue」は「paraText」です
選択項目内の text="paraText" を持つ最初の項目を選択対象に設定します
選択項目内の value="paraValue" を持つ項目を選択対象に設定します
その値を取得します現在選択されている選択項目
現在選択されている選択テキスト項目を取得する
現在選択されている選択項目のインデックスを取得する
選択項目をクリアする

// 1.判断select选项中 是否存在Value="paraValue"的Item 
function jsSelectIsExitItem(objSelect, objItemValue) { 
var isExit = false; 
for (var i = 0; i < objSelect.options.length; i++) { 
if (objSelect.options[i].value == objItemValue) { 
isExit = true; 
break; 
} 
} 
return isExit; 
}

// 2.向select选项中 加入一个Item 
function jsAddItemToSelect(objSelect, objItemText, objItemValue) { 
//判断是否存在 
if (jsSelectIsExitItem(objSelect, objItemValue)) { 
alert("该Item的Value值已经存在"); 
} else { 
var varItem = new Option(objItemText, objItemValue); 
objSelect.options.add(varItem); 
alert("成功加入"); 
} 
}

// 3.从select选项中 删除一个Item 
function jsRemoveItemFromSelect(objSelect, objItemValue) { 
//判断是否存在 
if (jsSelectIsExitItem(objSelect, objItemValue)) { 
for (var i = 0; i < objSelect.options.length; i++) { 
if (objSelect.options[i].value == objItemValue) { 
objSelect.options.remove(i); 
break; 
} 
} 
alert("成功删除"); 
} else { 
alert("该select中 不存在该项"); 
} 
}

// 4.删除select中选中的项 
function jsRemoveSelectedItemFromSelect(objSelect) { 
var length = objSelect.options.length - 1; 
for(var i = length; i >= 0; i--){ 
if(objSelect[i].selected == true){ 
objSelect.options[i] = null; 
} 
} 
}

// 5.修改select选项中 value="paraValue"的text为"paraText" 
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) { 
//判断是否存在 
if (jsSelectIsExitItem(objSelect, objItemValue)) { 
for (var i = 0; i < objSelect.options.length; i++) { 
if (objSelect.options[i].value == objItemValue) { 
objSelect.options[i].text = objItemText; 
break; 
} 
} 
alert("成功修改"); 
} else { 
alert("该select中 不存在该项"); 
} 
}

// 6.设置select中text="paraText"的第一个Item为选中 
function jsSelectItemByValue(objSelect, objItemText) { 
//判断是否存在 
var isExit = false; 
for (var i = 0; i < objSelect.options.length; i++) { 
if (objSelect.options[i].text == objItemText) { 
objSelect.options[i].selected = true; 
isExit = true; 
break; 
} 
} 
//Show出结果 
if (isExit) { 
alert("成功选中"); 
} else { 
alert("该select中 不存在该项"); 
} 
}

// 7.设置select中value="paraValue"的Item为选中 
document.all.objSelect.value = objItemValue;
// 8.得到select的当前选中项的value 
var currSelectValue = document.all.objSelect.value;
// 9.得到select的当前选中项的text 
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
// 10.得到select的当前选中项的Index 
var currSelectIndex = document.all.objSelect.selectedIndex;
// 11.清空select的项 
document.all.objSelect.options.length = 0;

以上がjquery 操作選択インスタンスの完全なコレクションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。