자바스크립트에서 선택을 설정하는 방법-JS 튜토리얼-php.cn

자바스크립트에서 선택을 설정하는 방법

coldplay.xixi

풀어 주다： 2023-01-04 09:35:40

원래의

4790명이 탐색했습니다.

JavaScript에서 선택을 설정하는 방법: 1. 값이 pxx로 설정된 항목을 선택하려면 코드는 [$(".selector").val("pxx")]입니다. 2. 텍스트가 설정된 항목을 선택하려면; pxx의 경우 코드는 [ $(".selector").find..]입니다.

자바스크립트에서 선택을 설정하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, DELL G3 컴퓨터.

JavaScript에서 선택을 설정하는 방법:

1. 항목을 pxx로 설정하여

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

로그인 후 복사

를 선택합니다. 2. 텍스트를 pxx로 설정하여 항목을 선택합니다.

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

로그인 후 복사

다음은 대괄호 사용법입니다. 대괄호 안의 기호 앞에는 따옴표 없이 속성 이름이 옵니다. 대괄호를 사용하면 논리가 매우 단순해지는 경우가 많습니다.

값 가져오기:

1. 현재 선택한 항목의 값 가져오기

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

로그인 후 복사

2. 현재 선택한 항목의 텍스트 가져오기

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

로그인 후 복사

여기서 콜론을 사용하여 추론도 수행합니다. 더 간단합니다.

선택의 계단식을 자주 사용합니다. 즉, 두 번째 선택의 값이 첫 번째 선택에서 선택한 값으로 변경됩니다. 이것은 jquery에서 매우 간단합니다.

예:

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

로그인 후 복사

Js 작업 선택 목록

선택 옵션에 Value="paraValue"인 항목이 있는지 판단하세요

선택 옵션에 항목 추가

선택 옵션에서 항목 삭제

Delete select 선택한 항목

select 옵션에서 value="paraValue"의 텍스트를 "paraText"로 수정하세요

select에서 text="paraText"인 첫 번째 항목이 선택되도록 설정

Item을 다음으로 설정 value="paraValue" in the select For Selection

select의 현재 선택된 항목 값 가져오기

select의 현재 선택된 항목의 텍스트 가져오기

select의 현재 선택된 항목의 Index 가져오기

Clear the 선택한 항목

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;

로그인 후 복사