Detaillierte Einführung in die Verwendung von Single-Select- und Multiple-Select-Tags in HTML
高洛峰
Freigeben： 2017-03-06 15:23:54
Original
2364 Leute haben es durchsucht
Das
select-Element erstellt Einzelauswahl- oder Mehrfachauswahlmenüs. Beim Absenden eines Formulars sendet der Browser die ausgewählten Elemente oder sammelt mehrere durch Kommas getrennte Optionen. Das Folgende ist ein Beispiel für seine spezifische Verwendung.
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 das Namensattribut ein, wenn die
Der Code lautet wie folgt:
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Nach dem Login kopieren
Daunter kann das weggelassen, auf der Seite Verwendung
@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);
}
}
}
Nach dem Login kopieren
6 . Holen Sie sich alle Elemente in der Auswahl und stellen Sie sie zusammen Werte in eine durch Kommas getrennte Zeichenfolge
Der Code lautet wie folgt:
@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;
}
Nach dem Login kopieren
7. Verschieben Sie alle ausgewählten Optionen in einer Auswahl in eine andere Auswahl
Der Code lautet wie folgt:
@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;
}
}
}
}
Nach dem Login kopieren
8. Verschieben Sie die ausgewählten Optionen in eine Auswahl. Verschieben Sie alle Optionen in eine andere Auswahl.
Der Code lautet wie folgt:
@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;
}
}
}
Nach dem Login kopieren
Eine ausführlichere Einführung in die Verwendung von Select-Tags mit Einzel- und Mehrfachauswahl in HTML finden Sie auf der chinesischen PHP-Website für verwandte Artikel!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
