Js 작업 백과사전 선택(값, 설정 선택 등)_javascript 스킬

jquery 연산 select (값, 설정 선택)

select 연산을 할 때마다 항상 나가서 정보를 찾아봐야 하니까 직접 요약해 보시는 건 어떨까요, 앞으로는 여기까지 보도록 하겠습니다.

예를 들어

1. 값을 pxx로 설정하여

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

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

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

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

3. 현재 선택한 항목의 값을 가져옵니다.

$(".selector").val()

4.

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

여기에서는 콜론을 사용하고 추론을 적용하면 코드가 더 간단해집니다. .

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

예:

코드 복사 코드는 다음과 같습니다.

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

// 두 번째 것을 먼저 지웁니다

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

// 실제 애플리케이션에서 여기에 있는 여러 옵션은 일반적으로 루프를 사용하여 생성됩니다.

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

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

})

Js Operation Select Encyclopedia

선택 옵션이 있는지 판단합니다. with Value="paraValue"
선택 옵션에 항목 추가
선택 옵션에서 항목 삭제
선택 항목에서 선택한 항목 삭제
선택 옵션에서 value="paraValue" 텍스트 수정 "paraText"에 대한 옵션 선택
선택 항목에서 text="paraText"가 있는 첫 번째 항목을 선택하도록 설정
선택 항목에서 value="paraValue"가 있는 항목을 선택하도록 설정
값 가져오기 select에서 현재 선택된 항목
select에서 현재 선택된 항목의 텍스트 가져오기
select에서 현재 선택된 항목의 인덱스 가져오기
선택한 항목 지우기
js 코드

코드 복사 코드는 다음과 같습니다.

/// 1. 선택 옵션에 Value="paraValue"인 항목이 있는지 확인
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false
for; (var i = 0; i < objSelect.options.length; i ) {
if (objSelect.options[i].value == objItemValue) {
isExit =
break; >}
}
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("성공적으로 추가됨");
}
}

// 선택 옵션
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("이 항목은 이 선택 항목에 존재하지 않습니다.")
}
}


// 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 < objSelect.options.length; i ) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText ;
break;
}
}
alert("성공적으로 수정되었습니다.")
} else {
alert("이 항목은 수정되었습니다. 선택 항목에 없음");
}
}

// 6. 선택할 선택 항목에 text="paraText"를 사용하여 첫 번째 항목을 설정합니다.
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 =
break;
}
//표시 결과
if (isExit) {
Alert("성공적으로 선택되었습니다");
} else {
alert("선택한 항목이 없습니다.")
}
}

// 7. 선택 설정 값이 "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 항목의 Index를 가져옵니다.
var currSelectIndex = document.all.objSelect.selectedIndex;

// 11. 선택한 항목 지우기
document.all .objSelect.options.length = 0