In diesem Artikel geht es hauptsächlich um die grundlegendsten Methoden im Zusammenhang mit Javascript und Select, als Referenz für Personen, die mit Javascript nicht vertraut sind. Eine häufige Situation besteht darin, dass die Person, die die Formularstruktur vorschlägt, nicht nur die Logik für das Programm entwerfen und Datenstrukturen erstellen muss, sondern auch den Stil des Formulars entwerfen und mit Javascript vertraut sein muss. Einige Unternehmen verlangen möglicherweise Kenntnisse von Ihnen in Photoshop: Am Anfang müssen wir alle ein Allrounder sein.
Das Folgende ist die Grundlage unseres Beispiels; dies ist kein Standardformular.
<form id="f">
<select size="1" name="s">
<option value="VeVB.COm">Wulin.com</option>
<option value="baidu.com">Baidu</option>
</select>
</form>
-------------------------------------------------- --------------------------
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
<!--
var f = document.getElementById("f");
//Anzahl der ausgewählten Listenelemente abrufen
document.write(fsoptions.length);
document.write(fslength);
//Der Index des aktuell ausgewählten Elements (beginnend bei 0) (es gibt zwei Methoden)
//Wenn mehrere Elemente ausgewählt sind, wird der Index des ersten ausgewählten Elements zurückgegeben
document.write(fsoptions.selectedIndex);
document.write(fsselectedIndex);
//Überprüfen Sie, ob ein Element ausgewählt ist
document.write(fsoptions[0].selected);
//Den Wert und Text eines bestimmten Elements abrufen
document.write(fsoptions[0].value);
document.write(fsoptions[1].text);
//Ein Element löschen
fsoptions[1] = null;
//Einen Artikel hinzufügen
fsoptions[fsoptions.length] = new Option("Zusätzlicher Text", "Zusätzlicher Wert");
//Ein Element ändern
fsoptions[1] = new Option("geänderter Text", "geänderter Wert");
//Sie können den Text und den Wert des Elements auch direkt festlegen
//-->
</script>
//Alle Elemente in der Liste auswählen
Funktion SelectAllOption(list)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected = true;
}
}
//Die Auswahl der Elemente in der Liste durch VeVB.COm asp learning network umkehren
functionDeSelectOptions(list)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected = !list.options[i].selected;
}
}
//Gibt die Anzahl der ausgewählten Elemente in der Liste zurück
Funktion GetSelectedOptionsCnt(list)
{
var cnt = 0;
var i = 0;
for (i=0; i<list.options.length; i++)
{
if (list.options[i].selected)
{
cnt++;
}
}
return cnt;
}
//Löschen Sie die Liste
Funktion ClearList(list)
{
while (list.options.length > 0)
{
list.options[0] = null;
}
}
//Das ausgewählte Element aus der Liste löschen
//Gibt die Anzahl der gelöschten Elemente zurück
Funktion DelSelectedOptions(list)
{
var i = 0;
var deleteCnt = 0;
while (i < list.options.length)
{
if (list.options[i].selected)
{
list.options[i] = null;
deleteCnt++;
}
anders
{
i++;
}
}
return deleteCnt;
}
//Diese Funktion findet heraus, ob das entsprechende Element vorhanden ist
//repeatCheck, ob eine Wiederholbarkeitsprüfung durchgeführt werden soll
//Wenn es „v“ ist, führen Sie eine Duplikatwertprüfung nach Wert durch
//Wenn es „t“ ist, führe eine Prüfung auf doppelte Werte basierend auf dem Text durch
//Wenn es „vt“ ist, führen Sie eine Prüfung auf doppelte Werte nach Wert und Text durch
//Andere Werte, keine Wiederholbarkeitsprüfung, gibt false zurück
Funktion OptionExists(list, optText, optValue, repeatCheck)
{
var i = 0;
var find = false;
if (repeatCheck == "v")
{
//Doppelte Wertprüfung nach Wert
for (i=0; i<list.options.length; i++)
{
if (list.options[i].value == optValue)
{
find = true;
brechen;
}
}
}
else if (repeatCheck == "t")
{
// Prüfung per Text wiederholen
for (i=0; i<list.options.length; i++)
{
if (list.options[i].text == optText)
{
find = true;
brechen;
}
}
}
sonst wenn (repeatCheck == "vt")
{
//Duplikatprüfung nach Wert und Text
for (i=0; i<list.options.length; i++)
{
if ((list.options[i].value == optValue) && (list.options[i].text == optText))
{
find = true;
brechen;
}
}
}
Rückgabe finden;
}
//Ein Element an die Liste anhängen
//list ist die Liste, die angehängt werden soll
//optText und optValue repräsentieren den Text bzw. den Wert des Elements
//repeatCheck, ob eine Wiederholbarkeitsprüfung durchgeführt werden soll, siehe OptionExists
//Gibt true zurück, wenn das Hinzufügen erfolgreich war, false, wenn es fehlgeschlagen ist
Funktion AppendOption(list, optText, optValue, repeatCheck)
{
if (!OptionExists(list, optText, optValue, repeatCheck))
{
list.options[list.options.length] = neue Option(optText, optValue);
return true;
}
anders
{
return false;
}
}
//Element einfügen
// Einfügeposition indexieren. Wenn die Einfügeposition >= die Anzahl der vorhandenen Elemente in der Liste ist, entspricht ihre Funktion dem Anhängen von Elementen ohne wiederholte Überprüfung
//optText und optValue stellen den Text bzw. den Wert des Elements dar
Funktion InsertOption(list, index, optText, optValue)
{
var i = 0;
for (i=list.options.length; i>index; i--)
{
list.options[i] = new Option(list.options[i-1].text, list.options[i-1].value);
}
list.options[index] = neue Option(optText, optValue);
}
//Elemente von einer Liste in eine andere Liste exportieren
//repeatCheck, ob eine Wiederholbarkeitsprüfung durchgeführt werden soll, siehe OptionExists
//Nachdem deleteSource-Elemente in das Ziel importiert wurden, wird angegeben, ob die Elemente in der Quellliste gelöscht werden sollen
//Gibt die Anzahl der betroffenen Elemente zurück
Funktion ListToList(sList, dList, repeatCheck, deleteSource)
{
//Die Anzahl der betroffenen Zeilen
var Zeilen = 0;
var i = 0;
while (i<sList.options.length)
{
if (sList.options[i].selected && AppendOption(dList, sList.options[i].text, sList.options[i].value, repeatCheck))
{
//Erfolgreich hinzugefügt
Linien++;
if(deleteSource)
{
//Elemente aus der Quellliste löschen
sList.options[i] = null;
}
anders
{
i++;
}
}
anders
{
i++;
}
}
Rücklaufleitungen;
}
//Das ausgewählte Element in der Liste nach oben verschieben
Funktion MoveSelectedOptionsUp(list)
{
var i = 0;
var value = "";
var text = "";
für (i=0; i<(list.options.length-1); i++)
{
if (!list.options[i].selected && list.options[i+1].selected)
{
value = list.options[i].value;
text = list.options[i].text;
list.options[i] = new Option(list.options[i+1].text, list.options[i+1].value);
list.options[i].selected = true;
list.options[i+1] = neue Option(text, wert);
}
}
}
//Das ausgewählte Element in der Liste nach unten verschieben
Funktion MoveSelectedOptionsDown(list)
{
var i = 0;
var value = "";
var text = "";
for (i=list.options.length-1; i>0; i--)
{
//www.VeVB.COm
if (!list.options[i].selected && list.options[i-1].selected)
{
value = list.options[i].value;
text = list.options[i].text;
list.options[i] = new Option(list.options[i-1].text, list.options[i-1].value);
list.options[i].selected = true;
list.options[i-1] = neue Option(text, wert);
}
}
}