JavaScriptで選択を設定する方法-jsチュートリアル-php.cn

JavaScriptで選択を設定する方法

coldplay.xixi

リリース： 2023-01-04 09:35:40

オリジナル

4743 人が閲覧しました

JavaScript で選択を設定する方法: 1. 値が pxx の項目を選択に設定します。コードは [$(".selector").val("pxx")] です; 2. 項目を設定しますテキストを pxx に指定して選択すると、コードは [$(".selector").find..] になります。

JavaScriptで選択を設定する方法

このチュートリアルの動作環境: Windows 7 システム、JavaScript バージョン 1.8.5、DELL G3 コンピューター。

JavaScript で選択を設定する方法:

1. 値が px

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

ログイン後にコピー

に設定された項目を選択します2. テキストが設定された項目を選択しますto pxx

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

ログイン後にコピー

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

値の取得:

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

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

ログイン後にコピー

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

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

ログイン後にコピー

ここではコロンが使用されていますが、その使用法をマスターし、1 つの例から推測することで、コードも簡素化されます。

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

例:

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

ログイン後にコピー

Js 操作リストの選択

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

選択オプションに項目を追加します。

選択オプションから項目を削除します。

選択オプションで選択されている項目を削除します。

値のテキストを変更します=選択オプションの「paraValue」を「paraText」にします。

選択オプションの text="paraText" を含む最初の項目を選択対象に設定します。

選択オプションの value="paraValue" を含む項目を選択します。選択対象を選択

Get select 現在選択されている項目の値

現在選択されている select 項目のテキストを取得

現在選択されている項目のインデックスを取得select

選択した項目をクリアします

js コード

// 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;

ログイン後にコピー