Heim >Web-Frontend >HTML-Tutorial >Ausführliche Erläuterung der Verwendung des Select-Tags mit Einzelauswahl und Mehrfachauswahl bei der Erstellung von HTML_HTML/Xhtml_Web-Seiten
Ausführliche Erläuterung der Verwendung des Select-Tags mit Einzelauswahl und Mehrfachauswahl bei der Erstellung von HTML_HTML/Xhtml_Web-Seiten
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-05-16 16:37:422374Durchsuche
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
Code kopieren
Der Code lautet wie folgt:
Kopieren Sie den Code Der Code lautet wie folgt :
Code kopierenDer Code lautet wie folgt:
//Mit dem Mehrfachattribut können Sie mehrere Male auswählen
Wenn das Größenattribut festgelegt ist, werden drei Daten angezeigt. Beachten Sie, dass eine Mehrfachauswahl nicht zulässig ist.
var objSelect = document.getElementById(objSelectId); Wenn das Größenattribut festgelegt ist, werden drei Daten angezeigt. Beachten Sie, dass eine Mehrfachauswahl nicht zulässig ist.
var isExit = false;
if (null != objSelect && typeof(objSelect) != "undefiniert") {
for(var i=0;i
isExit = true;
}
2. Fügen Sie einen Artikel zur Auswahloption hinzu } } return isExit; }
Kopieren Sie den Code
Der Code lautet wie folgt:
@param objSelectId Die ID der Zielauswahlkomponente, die dem Element hinzugefügt werden soll.
@param objItemText Der Inhalt des hinzuzufügenden Elements.
@param objItemValue Der Wert des hinzuzufügenden Elements
function addOneItemToSelect(objSelectId ,objItemText,objItemValue) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != "undefiniert") {
//Bestimmen Sie, ob der Wert item bereits in der Auswahl vorhanden ist
if(isSelectItemExit(objSelectId,objItemValue)) {
$.messager.alert('Prompt message','Die Option mit diesem Wert existiert bereits!' ,'info');
} else {
var varItem = new Option(objItemText,objItemValue);
objSelect.options.add(varItem>}
}
3. Löschen Sie das ausgewählte Element aus der Auswahloption, unterstützt Mehrfachauswahl und Mehrfachlöschung
Kopieren Sie den Code Der Code lautet wie folgt:
function removeSelectItemsFromSelect(objSelectId) {
var objSelect = document.getElementById (objSelectId);
var delNum = 0;
if (null != objSelect && typeof(objSelect) != "undefiniert") {
for(var i=0;iif(objSelect .options[i].selected) {
objSelect.options.remove(i);
delNum = delNum 1;
i = i - 1 ;
}
}
if (delNum <= 0 ) {
$.messager.alert('Message', 'Bitte wählen Sie die Option aus, die Sie löschen möchten!', 'info') ;
} else {
$.messager .alert('prompt message',''delNum' Optionen wurden erfolgreich gelöscht!','info');
}
}
4. Wählen Sie „Einen Artikel löschen“ entsprechend dem angegebenen Wert in der Option
var objSelect = document.getElementById (objSelectId);
var delNum = 0;
if (null != objSelect && typeof(objSelect) != "undefiniert") {
for(var i=0;i
objSelect.options.remove(i);
delNum = delNum 1;
i = i - 1 ;
}
}
if (delNum <= 0 ) {
$.messager.alert('Message', 'Bitte wählen Sie die Option aus, die Sie löschen möchten!', 'info') ;
} else {
$.messager .alert('prompt message',''delNum' Optionen wurden erfolgreich gelöscht!','info');
}
}
4. Wählen Sie „Einen Artikel löschen“ entsprechend dem angegebenen Wert in der Option
Kopieren Sie den Code
@param objItemValue Der auf Existenz zu überprüfende Wert
Der Code lautet wie folgt:
@param objSelectId Die ID der zu überprüfenden Zielauswahlkomponente function removeItemFromSelectByItemValue( objSelectId,objItemValue) {
var objSelect = document.getElementById(objSelectId); if (null != objSelect && typeof(objSelect) != "undefined") {
//Bestimmen Sie, ob es existiert
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','Erfolgreich gelöscht!','info'); 🎜>} else {
$.messager.alert('Message','No Es gibt Optionen mit angegebenen Werten!','info');
}
}
5. Deaktivieren Sie alle Optionen in der Auswahl
Code kopierenvar objSelect = document.getElementById(objSelectId); if (null != objSelect && typeof(objSelect) != "undefined") {
//Bestimmen Sie, ob es existiert
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','Erfolgreich gelöscht!','info'); 🎜>} else {
$.messager.alert('Message','No Es gibt Optionen mit angegebenen Werten!','info');
}
}
5. Deaktivieren Sie alle Optionen in der Auswahl
Der Code lautet wie folgt:
@param objSelectId Die zu löschende Zielauswahlkomponenten-ID function clearSelect( objSelectId) { var objSelect = document.getElementById(objSelectId); if (null != objSelect && typeof (objSelect) != "undefiniert") {
for(var i=0;i}
}
}
6. Holen Sie sich alle Elemente in „select“ und fügen Sie alle Werte in einer durch Kommas getrennten Zeichenfolge zusammen
Kopieren Sie den Code}
}
6. Holen Sie sich alle Elemente in „select“ und fügen Sie alle Werte in einer durch Kommas getrennten Zeichenfolge zusammen
Der Code lautet wie folgt:
@param objSelectId target select Component id @return die Werte aller Elemente in die durch Kommas getrennte Funktion getAllItemValuesByString(objSelectId) { var selectItemsValuesStr = ""; var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect ) != "undefiniert") { 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. Alle ausgewählten Optionen in einer Auswahl in eine andere verschieben
Kopieren Sie den Code
Der Code lautet wie folgt:
@param fromObjSelectId Die ursprüngliche Auswahlkomponenten-ID des verschobenen Elements
@param toObjectSelectId Die Zielauswahlkomponenten-ID, in die das verschobene Element eingegeben wird
function moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document. getElementById(fromObjSelectId);
var delNum = 0;
if (null != objSelect && typeof(objSelect) != "undefiniert") {
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. Alle Optionen in eine andere Auswahl verschieben
@param fromObjSelectId Die ursprüngliche Auswahlkomponenten-ID des verschobenen Elements
if (0 == i) {
selectItemsValuesStr = objSelect.options[i].value;
} else {
selectItemsValuesStr = selectItemsValuesStr "," objSelect.options[i].value; }
return selectItemsValuesStr;
7. Alle ausgewählten Optionen in einer Auswahl in eine andere verschieben
Kopieren Sie den Code
Der Code lautet wie folgt:
@param fromObjSelectId Die ursprüngliche Auswahlkomponenten-ID des verschobenen Elements
@param toObjectSelectId Die Zielauswahlkomponenten-ID, in die das verschobene Element eingegeben wird
function moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document. getElementById(fromObjSelectId);
var delNum = 0;
if (null != objSelect && typeof(objSelect) != "undefiniert") {
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. Alle Optionen in eine andere Auswahl verschieben
Code kopierenDer Code lautet wie folgt:
@param toObjectSelectId Die Zielauswahlkomponenten-ID, in die das verschobene Element eingegeben wird
function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document.getElementById (fromObjSelectId);
if (null != objSelect) {
for(var i=0;iaddOneItemToSelect(toObjectSelectId,objSelect.options[ i].text ,objSelect.options[i].value)
objSelect.options.remove(i);
i = i - 1;
}
}
function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document.getElementById (fromObjSelectId);
if (null != objSelect) {
for(var i=0;i
objSelect.options.remove(i);
i = i - 1;
}
}
Stellungnahme：
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