Ausführliche Erläuterung der Verwendung des Select-Tags mit Einzelauswahl und Mehrfachauswahl bei der Erstellung von HTML_HTML/Xhtml_Web-Seiten

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 -Formulardaten an den Server gesendet werden.

1. Grundlegende Verwendung:

Code kopieren Der Code lautet wie folgt: Volvo Opel Audi

-Tag kann weggelassen und auf der Seite verwendet werden

Kopieren Sie den Code Der Code lautet wie folgt : Alle Online-Lernzentrum der Hubei TV University Online-Lernzentrum der Chengdu Normal University Wuhan Vocational and Technical College Online Learning Center </SELECT&gt ;

2. Das Select-Element kann auch für Mehrfachauswahlen verwendet werden, siehe folgenden Code:

Code kopieren Der Code lautet wie folgt: //Mit dem Mehrfachattribut können Sie mehrere Male auswählen High School ;/option> Ph.D.&lt ;/option> High School ”2”>College Ph.D.&lt ;/option> Wenn das Größenattribut festgelegt ist, werden drei Daten angezeigt. Beachten Sie, dass eine Mehrfachauswahl nicht zulässig ist. Grundschule "1">Mittelschule Oberschule Technische Sekundarschule ; College Doktorand Ph.D. Bitte wählen Sie

3. Bestimmen Sie mit der Auswahloption, ob ein Artikel mit dem angegebenen Wert in

Code kopieren

Der Code lautet wie folgt:

@param objSelectId Die ID der zu überprüfenden Zielauswahlkomponente @param objItemValue Der Wert, dessen Existenz überprüft werden soll function isSelectItemExit(objSelectId,objItemValue) { var objSelect = document.getElementById(objSelectId); var isExit = false; if (null != objSelect && typeof(objSelect) != "undefiniert") { for(var i=0;i if( objSelect.options[i].value == objItemValue) { isExit = true; } } } return isExit; } 2. Fügen Sie einen Artikel zur Auswahloption hinzu

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: @param objSelectId Die Zielauswahlkomponenten-ID, die gelöscht werden soll function removeSelectItemsFromSelect(objSelectId) { var objSelect = document.getElementById (objSelectId); var delNum = 0; if (null != objSelect && typeof(objSelect) != "undefiniert") { for(var i=0;i if(objSelect .options[i].selected) { objSelect.options.remove(i); delNum = delNum 1; i = i - 1 ; } } if (delNum $.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 Der Code lautet wie folgt: @param objSelectId Die ID der zu überprüfenden Zielauswahlkomponente @param objItemValue Der auf Existenz zu überprüfende Wert 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&lt ;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 kopieren

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 objSelect.options.remove(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

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") { var length = objSelect.options.length for(var i = 0; i 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 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 kopieren 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 moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { var objSelect = document.getElementById (fromObjSelectId); if (null != objSelect) { for(var i=0;i addOneItemToSelect(toObjectSelectId,objSelect.options[ i].text ,objSelect.options[i].value) objSelect.options.remove(i); i = i - 1; } }