HTML의 단일 선택 및 다중 선택 태그 사용법에 대한 자세한 소개

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

1. 기본 사용법:

코드는 다음과 같습니다.

<select> 
<option value ="volvo">Volvo</option> 
<option value ="saab">Saab</option> 
<option value="opel">Opel</option> 
<option value="audi">Audi</option> 
</select>

그 중 4afa15d3069109ac30911f04c56f3338 페이지에서 사용됨

코드는 다음과 같습니다.

<SELECT NAME="studyCenter" id="studyCenter" SIZE="1"> 
<OPTION VALUE="0">全部 
<OPTION VALUE="1">湖北电大网络学习中心 
<OPTION VALUE="2">成都师范学院网络学习中心 
<OPTION VALUE="3">武汉职业技术学院网络学习中心 
</SELECT>

2. Select 요소는 다중 선택도 가능합니다. 다음 코드를 참조하세요.

코드는 다음과 같습니다.

//有multiple属性，则可以多选 
<select name= “education” id=”education” multiple=”multiple”> 
<option value=”1”>高中</option> 
<option value=”2”>大学</option> 
<option value=”3”>博士</option> 
</select> 
//下面没有multiple属性 , 只显示一条，不能多选 
<select name= “education” id=”education” > 
<option value=”1”>高中</option> 
<option value=”2”>大学</option> 
<option value=”3”>博士</option> 
</select> 
//下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据，注意不能多选的。 
<select name="education" id="education" size=&#39;3&#39;> 
<option value="0">小学</option> 
<option value="1">初中</option> 
<option value="2">高中</option> 
<option value="3">中专</option> 
<option value="4">大专</option> 
<option value="5">本科</option> 
<option value="6">研究生</option> 
<option value="7">博士</option> 
<option value="8">博士后</option> 
<option selected>请选择</option> 
</select>

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

1.

코드는 다음과 같습니다.

@param objSelectId 将要验证的目标select组件的id 
@param objItemValue 将要验证是否存在的值 
function isSelectItemExit(objSelectId,objItemValue) { 
var objSelect = document.getElementById(objSelectId); 
var isExit = false; 
if (null != objSelect && typeof(objSelect) != "undefined") { 
for(var i=0;i<objSelect.options.length;i++) { 
if(objSelect.options[i].value == objItemValue) { 
isExit = true; 
break; 
} 
} 
} 
return isExit; 
}

2. 선택 옵션에 항목을 추가합니다.

코드는 다음과 같습니다. :

@param objSelectId 将要加入item的目标select组件的id 
@param objItemText 将要加入的item显示的内容 
@param objItemValue 将要加入的item的值 
function addOneItemToSelect(objSelectId,objItemText,objItemValue) { 
var objSelect = document.getElementById(objSelectId); 
if (null != objSelect && typeof(objSelect) != "undefined") { 
//判断是否该值的item已经在select中存在 
if(isSelectItemExit(objSelectId,objItemValue)) { 
$.messager.alert('提示消息','该值的选项已经存在!','info'); 
} else { 
var varItem = new Option(objItemText,objItemValue); 
objSelect.options.add(varItem); 
} 
} 
}

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

코드는 다음과 같습니다.

@param objSelectId 将要进行删除的目标select组件id 
function removeSelectItemsFromSelect(objSelectId) { 
var objSelect = document.getElementById(objSelectId); 
var delNum = 0; 
if (null != objSelect && typeof(objSelect) != "undefined") { 
for(var i=0;i<objSelect.options.length;i=i+1) { 
if(objSelect.options[i].selected) { 
objSelect.options.remove(i); 
delNum = delNum + 1; 
i = i - 1; 
} 
} 
if (delNum <= 0 ) { 
$.messager.alert(&#39;提示消息&#39;,&#39;请选择你要删除的选项!&#39;,&#39;info&#39;); 
} else { 
$.messager.alert(&#39;提示消息&#39;,&#39;成功删除了&#39;+delNum+&#39;个选项!&#39;,&#39;info&#39;); 
} 
} 
}

4. 지정된 값에 따라 선택 옵션에서 항목을 삭제합니다.

코드는 다음과 같습니다.

@param objSelectId 将要验证的目标select组件的id 
@param objItemValue 将要验证是否存在的值 
function removeItemFromSelectByItemValue(objSelectId,objItemValue) { 
var objSelect = document.getElementById(objSelectId); 
if (null != objSelect && typeof(objSelect) != "undefined") { 
//判断是否存在 
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(&#39;提示消息&#39;,&#39;成功删除!&#39;,&#39;info&#39;); 
} else { 
$.messager.alert(&#39;提示消息&#39;,&#39;不存在指定值的选项!&#39;,&#39;info&#39;); 
} 
} 
}

5. 선택 항목에서 모든 옵션을 삭제합니다. >

코드는 다음과 같습니다:

@param objSelectId 将要进行清空的目标select组件id 
function clearSelect(objSelectId) { 
var objSelect = document.getElementById(objSelectId); 
if (null != objSelect && typeof(objSelect) != "undefined") { 
for(var i=0;i<objSelect.options.length;) { 
objSelect.options.remove(i); 
} 
} 
}

6. 선택 항목의 모든 항목을 가져오고 모든 값을 하나의 문자로 조합합니다. 문자열은 값 사이를 쉼표로 구분합니다.

코드는 다음과 같습니다:

@param objSelectId 目标select组件id 
@return select中所有item的值，值与值之间用逗号隔开 
function getAllItemValuesByString(objSelectId) { 
var selectItemsValuesStr = ""; 
var objSelect = document.getElementById(objSelectId); 
if (null != objSelect && typeof(objSelect) != "undefined") { 
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 移动item的原select组件id 
@param toObjectSelectId 移动item将要进入的目标select组件id 
function moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { 
var objSelect = document.getElementById(fromObjSelectId); 
var delNum = 0; 
if (null != objSelect && typeof(objSelect) != "undefined") { 
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].value) 
objSelect.options.remove(i); 
i = i - 1; 
} 
} 
} 
}

8. 한 선택 항목의 모든 옵션을 다른 선택 항목으로 이동합니다.

코드는 다음과 같습니다.

@param fromObjSelectId 移动item的原select组件id 
@param toObjectSelectId 移动item将要进入的目标select组件id 
function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { 
var objSelect = document.getElementById(fromObjSelectId); 
if (null != objSelect) { 
for(var i=0;i<objSelect.options.length;i=i+1) { 
addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value) 
objSelect.options.remove(i); 
i = i - 1; 
} 
} 
}

자세한 내용은 HTML에서 선택 태그의 단일 선택 및 다중 선택 사용법에 대한 자세한 소개, 관련 기사를 보려면 PHP 중국어 웹 사이트를 주목하세요!