Dieses Mal zeige ich Ihnen, wie Sie das Select-Tag in HTML verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Select-Tags in HTML? Das
select-Element erstellt Einzelauswahl- oder Mehrfachauswahlmenüs. Wenn das Formular gesendet wird, sendet der Browser die ausgewählten Elemente oder sammelt mehrere durch Kommas getrennte Optionen, kombiniert sie in einer einzigen Parameterliste und schließt den Namen ein, wenn er die Attribute.
1. Grundlegende Verwendung:
<select> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>
<SELECT NAME="studyCenter" id="studyCenter" SIZE="1"> <OPTION VALUE="0">全部 <OPTION VALUE="1">湖北电大网络学习中心 <OPTION VALUE="2">成都师范学院网络学习中心 <OPTION VALUE="3">武汉职业技术学院网络学习中心 </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='3'> <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>
@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; }
@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); } } }
Löschen Sie das ausgewählte Element aus den Auswahloptionen, unterstützen Sie Mehrfachauswahl und Mehrfachlöschung
@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('提示消息','请选择你要删除的选项!','info'); } else { $.messager.alert('提示消息','成功删除了'+delNum+'个选项!','info'); } } }
@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('提示消息','成功删除!','info'); } else { $.messager.alert('提示消息','不存在指定值的选项!','info'); } } }
@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); } } }
Zeichenfolge
zusammen, getrennt durch Kommas
@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; }
Verwandte Lektüre:
So legen Sie die Breite der Tabelle fest. Tabellenlayout: behobenFestlegen der Breite der Tabelle cell td So lösen Sie das ProblemDas obige ist der detaillierte Inhalt vonWozu dient das Select-Tag in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!