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

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

1. 기본 사용법:

코드 복사 코드는 다음과 같습니다. Volvo Saab 옵션 값= "opel" Audi

태그는 생략 가능하며 페이지 내에서 사용 가능합니다

코드 복사 코드는 다음과 같습니다 : 모두 후베이 TV 대학교 온라인 학습 센터 청두 사범대학교 온라인 학습 센터 우한 직업 기술 대학 온라인 학습 센터 </SELECT&gt ;

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

코드 복사 코드는 다음과 같습니다. //multiple 속성을 사용하면 여러 번 선택할 수 있습니다 고등학교 대학 박사. 고등학교 대학 박사.&lt ;/option> //다음과 같습니다. size 속성이 설정된 경우, 세 개의 데이터가 표시됩니다. 다중 선택은 허용되지 않습니다. 초등학교 중학교 고등학교 공업고등학교 대학 학부 대학원생 박사. 박사후 연구원🎜> 선택하세요

3. 다중 선택 선택 구성 요소와 관련된 모든 일반적인 작업:

1. 선택 옵션 확인

코드 복사

코드는 다음과 같습니다. @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;i if( 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;i if(objSelect .options[i].selected) { objSelect.options.remove(i); delNum = delNum 1 i - 1 ; } } if (delNum $.messager.alert('메시지', '삭제할 옵션을 선택하세요!', '정보') ; } else { $.messager .alert('prompt message',''delNum' 옵션이 성공적으로 삭제되었습니다!','info') } } } 4.

옵션에 지정된 값에 따라 항목 삭제를 선택합니다 코드는 다음과 같습니다. @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&lt ;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;i objSelect.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;i if(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;i addOneItemToSelect(toObjectSelectId,objSelect.options[ i].text ,objSelect.options[i].value) objSelect.options.remove(i); i = i - 1 } } }