JS操作セレクト事典(値、設定選択など)_javascriptスキル

jquery 操作 select (値、設定の選択)

select を操作するたびに、情報を調べなければなりません。自分でまとめてみませんか。今後はここを参照します。

例:

1. 値を pxx に設定して、

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

2. text を pxx に設定し、項目を選択します

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

角括弧が使用されています。角括弧内の等号の前に引用符なしで属性名が続きます。多くの場合、角括弧を使用するとロジックが非常に単純になります。

3. 現在選択されている項目の値を取得します

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

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

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

ここでコロンが使用されているので、その使い方をマスターして推論を適用すると、コードも簡単になります。 。

選択のカスケードはよく使用されます。つまり、2 番目の選択の値は、最初の選択で選択された値で変化します。これはjQueryでは非常に簡単です。

例:

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

$(".selector1").change(function(){

// まず 2 つ目をクリアします

$(".selector2").empty();

// 実際のアプリケーションでは、通常、ここでの複数のオプションはループを使用して生成されます

var option = $("").val(1).text("pxx");

$(".selector2").append(option);

});

Js 操作選択大辞典

選択オプションの有無を判定with Value="paraValue"
選択オプションに項目を追加します
選択オプションから項目を削除します
選択項目で選択されている項目を削除します
の value="paraValue" のテキストを変更しますselect オプション "paraText" の場合
選択項目内の text="paraText" を持つ最初の項目を選択対象に設定します
選択項目内の value="paraValue" を持つ項目を選択対象に設定します
値を取得しますselect で現在選択されている項目
select の現在選択されている項目のテキストを取得
select の現在選択されている項目のインデックスを取得
選択されている項目をクリア
js コード

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

/// 1. 選択オプションに Value="paraValue" の項目があるかどうかを確認します。
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false; (var i = 0; i < objSelect.options.length; i ) {
if (objSelect.options[i].value == objItemValue) {
isExit = true; >}
}
return isExit;
}

// 2. 選択オプションに項目を追加します
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
/ /存在するかどうかを判定
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("この項目の値はすでに存在します")
} else {
var varItem = new Option(objItemText) , objItemValue);
objSelect.options.add(varItem);
alert("正常に追加されました");
}
}

// 3. select option
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//存在するかどうかを判断します
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
}
alert(" 正常に削除されました");
} else {
alert("この項目はこの選択範囲に存在しません")
}
}


// 4. 選択範囲の削除
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" のテキストは "paraText" です。
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//存在するかどうかを判断します
if (jsSelectIsExitItem (objSelect, objItemValue)) {
for (var i = 0; i if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText ;
break;
}
}
alert("正常に変更されました");
alert("この項目は選択範囲に存在しません");
}
}

// 6. 選択内の text="paraText" を持つ最初の項目を選択対象に設定します
function jsSelectItemByValue(objSelect, objItemText) {
//存在するかどうかを判定
var isExit = false;
for (var i = 0; i if (objSelect.options) [i].text == objItemText) {
objSelect.options[i].selected = true;
break;
}
; result
if (isExit) {
alert("正常に選択されました");
} else {
alert("この項目は選択範囲に存在しません"); >}

// 7. set select value="paraValue" の項目が選択されています
document.all.objSelect.value = objItemValue;

// 8. 値を取得しますselect
var currSelectValue = document.all .objSelect.value;

// 9. select
var currSelectText = document.all の現在選択されている項目のテキストを取得します。 .objSelect.options[document.all.objSelect.selectedIndex].text;

// 10. select の現在選択されている項目のインデックスを取得します
var currSelectIndex = document.all.objSelect.selectedIndex;

// 11. 選択した項目をクリアします
document.all .objSelect.options.length = 0;