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

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 } } }