HTML_HTML/Xhtml_Web 페이지 제작 시 select 태그의 단일 선택 및 다중 선택 사용법에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 16:37:422246검색
select 요소는 단일 선택 또는 다중 선택 메뉴를 만듭니다. 양식이 제출되면 브라우저는 선택한 항목을 제출하거나 쉼표로 구분된 여러 옵션을 수집하여 단일 매개변수 목록으로 결합하고
코드 복사
코드는 다음과 같습니다. <선택>
<옵션 값 ="volvo">Volvo
<옵션 값 ="saab">Saab 옵션 값= "opel"
코드 복사코드는 다음과 같습니다 :
코드 복사코드는 다음과 같습니다.
//multiple 속성을 사용하면 여러 번 선택할 수 있습니다
//다음과 같습니다. size 속성이 설정된 경우, 세 개의 데이터가 표시됩니다. 다중 선택은 허용되지 않습니다.
//다음과 같습니다. size 속성이 설정된 경우, 세 개의 데이터가 표시됩니다. 다중 선택은 허용되지 않습니다.
코드 복사
코드는 다음과 같습니다.
@param objSelectId 확인할 대상 선택 구성 요소의 ID @param objItemValue 존재 여부를 확인할 값 function isSelectItemExit(objSelectId,objItemValue) { var objSelect = document.getElementById(objSelectId); var isExit = false
if (null != objSelect && typeof(objSelect) != "정의되지 않음") { 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
objSelect.options.remove(i);
delNum = delNum 1
i - 1 ;
}
}
if (delNum <= 0 ) {
$.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< ;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')
}
}
}
코드 복사코드는 다음과 같습니다
for(var i=0;i}
}
}
6. select의 모든 항목을 가져오고 모든 값을 쉼표로 구분된 문자열로 조합합니다.
코드 복사
코드는 다음과 같습니다.
var objSelect = document.getElementById(objSelectId)
@param objSelectId 대상 선택 구성 요소 ID @return에 있는 모든 항목의 값을 반환합니다. 선택, 쉼표로 구분 function getAllItemValuesByString(objSelectId) {
var selectItemsValuesStr = ""; if (null != objSelect && typeof(objSelect) != "정의되지 않음") {
var length = objSelect.options.length
for(var i = 0; i < length; i = i 1) {
if (0 == i) {
selectItemsValuesStr = objSelect.options[i].value;
} else {
selectItemsValuesStr = selectItemsValuesStr "," objSelect.options[i].value;
return selectItemsValuesStr
}
7. 선택한 모든 옵션을 다른 선택 항목으로 이동
복사 코드
코드는 다음과 같습니다.var length = objSelect.options.length
for(var i = 0; i < length; i = i 1) {
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< objSelect.options.length;i=i 1) {
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
objSelect.options.remove(i);
i = i - 1
}
}
}
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.