HTML_HTML/Xhtml_Web 페이지 제작 시 select 태그의 단일 선택 및 다중 선택 사용법에 대한 자세한 설명-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML_HTML/Xhtml_Web 페이지 제작 시 select 태그의 단일 선택 및 다중 선택 사용법에 대한 자세한 설명

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:37 PM

html태그 선택단일 선택객관식

select 요소는 단일 선택 또는 다중 선택 메뉴를 만듭니다. 양식이 제출되면 브라우저는 선택한 항목을 제출하거나 쉼표로 구분된 여러 옵션을 수집하여 단일 매개변수 목록으로 결합하고
> ;

2. Select 요소는 다중 선택에도 사용할 수 있습니다. 다음 코드를 참조하세요.

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

//multiple 속성을 사용하면 여러 번 선택할 수 있습니다
//다음과 같습니다. size 속성이 설정된 경우, 세 개의 데이터가 표시됩니다. 다중 선택은 허용되지 않습니다.

코드 복사

코드는 다음과 같습니다.

@param objSelectId 확인할 대상 선택 구성 요소의 ID @param objItemValue 존재 여부를 확인할 값 function isSelectItemExit(objSelectId,objItemValue) { var objSelect = document.getElementById(objSelectId); var isExit = false

if (null != objSelect && typeof(objSelect) != "정의되지 않음") {

for(var i=0;iif( objSelect.options[i].value == objItemValue) {
isExit =
break;
}
}
return isExit;
}

2. 선택 옵션에 항목 추가

코드 복사

코드는 다음과 같습니다.

@param objSelectId 항목에 추가할 대상 선택 구성 요소의 ID
@param objItemText 추가할 항목의 내용
@param objItemValue 추가할 항목의 값
function addOneItemToSelect(objSelectId ,objItemText,objItemValue) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != "정의되지 않음") {
//값이 항목인지 확인
if(isSelectItemExit(objSelectId,objItemValue)) {
$.messager.alert('Prompt message','이 값을 가진 옵션이 이미 존재합니다!' ,'info');
} else {
var varItem = new Option(objItemText,objItemValue)
objSelect.options.add(varItem)
}
}
}

3. 선택 옵션에서 선택한 항목을 삭제합니다. 다중 선택 및 다중 삭제를 지원합니다

코드 복사

코드는 다음과 같습니다.

@param objSelectId 삭제할 대상 선택 구성 요소 ID
function RemoveSelectItemsFromSelect(objSelectId) {
var objSelect = document.getElementById (objSelectId);
var delNum = 0;
if (null != objSelect && typeof(objSelect) != "정의되지 않음") {
for(var i=0;iif(objSelect .options[i].selected) {
objSelect.options.remove(i);
delNum = delNum 1
i - 1 ;
}
}
if (delNum $.messager.alert('메시지', '삭제할 옵션을 선택하세요!', '정보') ;
} else {
$.messager .alert('prompt message',''delNum' 옵션이 성공적으로 삭제되었습니다!','info')
}
}
}

옵션에 지정된 값에 따라 항목 삭제를 선택합니다

코드는 다음과 같습니다.

@param objSelectId 확인할 대상 선택 컴포넌트의 id
@param objItemValue 존재 여부를 확인할 값
function RemoveItemFromSelectByItemValue( objSelectId,objItemValue) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != "undefine") {
//존재 여부 확인
if(isSelectItemExit(objSelect,objItemValue)) {
for(var i=0;i< ;objSelect.options.length;i ) {
if(objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
$.messager.alert('Message','삭제되었습니다!','info'); 🎜>} else {
$.messager.alert('Message','No 지정된 값을 가진 옵션이 있습니다!','info')
}
}
}

5. 선택 항목 모두 지우기

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

for(var i=0;iobjSelect.options.remove(i)
}
}
}

6. select의 모든 항목을 가져오고 모든 값을 쉼표로 구분된 문자열로 조합합니다.

코드 복사

코드는 다음과 같습니다.

@param objSelectId 대상 선택 구성 요소 ID @return에 있는 모든 항목의 값을 반환합니다. 선택, 쉼표로 구분 function getAllItemValuesByString(objSelectId) {

var selectItemsValuesStr = "";

var objSelect = document.getElementById(objSelectId)

if (null != objSelect && typeof(objSelect) != "정의되지 않음") {
var length = objSelect.options.length
for(var i = 0; i if (0 == i) {
selectItemsValuesStr = objSelect.options[i].value;
} else {
selectItemsValuesStr = selectItemsValuesStr "," objSelect.options[i].value;
return selectItemsValuesStr
}

7. 선택한 모든 옵션을 다른 선택 항목으로 이동

복사 코드

코드는 다음과 같습니다.

@param fromObjSelectId 이동된 항목의 원래 선택 구성 요소 ID
@param toObjectSelectId 이동된 항목이 입력할 대상 선택 구성 요소 ID
function moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document.getElementById(fromObjSelectId);
var delNum = 0
if (null != objSelect && typeof(objSelect) != "정의되지 않음") {
for(var i=0;iif(objSelect.options[i].selected) {
addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i]. 값)
objSelect.options.remove(i);
i = i - 1
}
}
}
}

8. 모든 옵션을 다른 선택으로 이동

코드 복사

코드는 다음과 같습니다.

@param fromObjSelectId 이동된 항목의 원래 선택 구성 요소 ID
@param toObjectSelectId 이동된 항목이 입력할 대상 선택 구성 요소 ID
function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document.getElementById (fromObjSelectId);
if (null != objSelect) {
for(var i=0;iaddOneItemToSelect(toObjectSelectId,objSelect.options[ i].text ,objSelect.options[i].value)
objSelect.options.remove(i);
i = i - 1
}
}
}

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML 태그 및 속성에 일관된 코딩 스타일을 사용하는 것의 중요성을 설명하십시오.May 01, 2025 am 12:01 AM

일관된 HTML 인코딩 스타일은 코드의 가독성, 유지 가능성 및 효율성을 향상시키기 때문에 중요합니다. 1) 소문자 태그 및 속성 사용, 2) 일관된 압입 유지, 3) 단일 또는 이중 인용문을 선택하고 고수하십시오. 4) 프로젝트에서 다양한 스타일을 혼합하지 않으십시오.

Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?Apr 30, 2025 pm 03:24 PM

솔루션 Bootstrap4에서 다중 프로 젝트 회전 목마를 구현하는 것은 부트 스트랩 4에서 멀티 프로 젝트 회전 목마를 구현하는 것은 쉬운 일이 아닙니다. 부트 스트랩 ...

DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?Apr 30, 2025 pm 03:21 PM

마우스 스크롤링 이벤트 침투의 효과를 달성하는 방법은 무엇입니까? 웹을 탐색하면 종종 특별한 상호 작용 디자인이 발생합니다. 예를 들어, DeepSeek 공식 웹 사이트에서 � ...

HTML 비디오의 재생 제어 스타일 수정 방법Apr 30, 2025 pm 03:18 PM

HTML 비디오의 기본 재생 제어 스타일은 CSS를 통해 직접 수정할 수 없습니다. 1. JavaScript를 사용하여 사용자 정의 컨트롤을 만듭니다. 2. CSS를 통해 이러한 통제를 아름답게합니다. 3. video.js 또는 plyr와 같은 라이브러리를 사용하여 호환성, 사용자 경험 및 성능을 고려하면 프로세스를 단순화 할 수 있습니다.

휴대 전화에서 기본 선택을 사용하면 어떤 문제가 발생합니까?Apr 30, 2025 pm 03:15 PM

휴대 전화에서 기본 선택을 사용하는 데있어 잠재적 인 문제는 모바일 애플리케이션을 개발할 때 종종 상자를 선택해야 할 필요가 있습니다. 일반적으로 개발자 ...

휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까?Apr 30, 2025 pm 03:12 PM

휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까? 모바일 장치에서 애플리케이션을 개발할 때는 올바른 UI 구성 요소를 선택하는 것이 매우 중요합니다. 많은 개발자 ...

Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하는 방법은 무엇입니까?Apr 30, 2025 pm 03:09 PM

Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하십시오. 3.js의 Octree를 사용하여 방에서 3 인칭 로밍을 구현하고 충돌을 추가하십시오 ...

휴대 전화에서 기본 선택을 사용할 때 어떤 문제가 발생합니까?Apr 30, 2025 pm 03:06 PM

모바일 장치에서 애플리케이션을 개발할 때 휴대폰에 대한 기본 선택 문제는 종종 사용자가 선택 해야하는 시나리오에 직면합니다. 네이티브 셀 ...

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

드림위버 CS6

시각적 웹 개발 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.