Grundlegendes Verständnis und Verwendung der HTML-Auswahloption

Grundlegendes Verständnis und Verwendung der HTML-Auswahloption
Detaillierte Erklärung von HTML (Option auswählen) in Javascript
1. Grundverständnis :

Code kopieren
Der Code lautet wie folgt:

var e = document.getElementById("selectId");
e. Optionen = neue Option("Text", "Wert");
//Erstellen Sie ein Optionsobjekt, d. h. erstellen Sie einen oder mehrere <option value="value">text</option> im <select>-Tag
//options ist ein Array, das mehrere Tags wie <option value="value">text</option> speichern kann

1: Eigenschaften des Arrays options[ ]:
Längenattribut---------Längenattribut
Die Eigenschaft selectedIndex ist der Indexwert des Textes im aktuell ausgewählten Feld. Dieser Indexwert wird automatisch vom Speicher (0, 1, 2, 3...) zugewiesen, entsprechend (dem ersten Textwert, dem zweiten Textwert, dem dritten Textwert, dem vierten Textwert..........)
2: Eigenschaften einer einzelnen Option (---obj.options[obj.selecedIndex] ist ein angegebener <option>-Tag, der ein--- ist)
Textattribut---------Text zurückgeben/angeben
Wertattribut------gibt den Wert zurück/gibt ihn an, der mit <options value="..."> übereinstimmt.
Indexattribut-------Gibt den Index zurück,
Die Eigenschaft selected gibt zurück bzw. gibt an, ob das Objekt ausgewählt ist. Durch die Angabe von true oder false können Sie das ausgewählte Element dynamisch ändern.
defaultSelected-Eigenschaft-----Gibt zurück, ob das Objekt standardmäßig ausgewählt ist. wahr / falsch.
3: Optionsmethode fügt ein <option>-Tag hinzu-----obj.options.add(new("text","value"));
Löschen eines <option>-Tags-----obj.options.remove(obj.selectedIndex)<delete>
Holen Sie sich den Text eines <option>-Tags-----obj.options[obj.selectedIndex].text<查>
Ändern Sie den Wert eines <option>-Tags-----obj.options[obj.selectedIndex]=new Option("neuer Text","neuer Wert")<ändern>
Alle <option>-Tags löschen-----obj.options.length = 0
Holen Sie sich den Wert eines <option>-Tags-----obj.options[obj.selectedIndex].value
Beachten:
a: Die obige Methode wird als obj.options.function() statt obj.funciton geschrieben, da sie mit IE und FF kompatibel ist. Beispielsweise ist obj.add() nur im IE gültig.
b: Die Option in obj.option muss nicht großgeschrieben werden, aber die Option in neuer Option muss großgeschrieben werden.
2. Anwendung

Code kopieren
Der Code lautet wie folgt:

<html>
<Kopf>
<Skriptsprache="Javascript">
Funktion Nummer(){
var obj = document.getElementById("meineAuswahl");
//obj.options[obj.selectedIndex] = new Option("Mein Essen","4"); //Ändere den Wert der aktuell ausgewählten
//obj.options.add(new Option("Mein Essen","4"));Weitere Option hinzufügen
//alert(obj.selectedIndex); //Seriennummer anzeigen, Option wird von Ihnen selbst festgelegt
//obj.options[obj.selectedIndex].text = "Mein Essen"; ändere den Wert
//obj.remove(obj.selectedIndex); Löschfunktion
}
</Skript>
</Kopf>
<Text>
<select id="meineAuswahl">
<option>Meine Tasche</option>
<option>Mein Notizbuch</option>
<option>Mein Öl</option>
<option>Meine Last</option>
</Auswählen>
<input type="button" name="button" value="Ergebnisse anzeigen" onclick="number();">
</body>
</html>

1. Dynamisches Erstellen einer Auswahl

Code kopieren
Der Code lautet wie folgt:

Funktion „erstelleAuswahl()“
var meineSelect = document.createElement("auswählen");
meineAuswahl.id = "meineAuswahl";
Dokument.Body.AppendChild(meineAuswahl);
}

2. Option hinzufügen

Code kopieren
Der Code lautet wie folgt:

Funktion addOption(){
//Finde das Objekt anhand der ID,
var obj = document.getElementById('meineAuswahl');
//Option hinzufügen
obj.add(new Option("text","value")); //Dies ist nur im Internet Explorer gültig.
obj.options.add(new Option("text","value")); //Dies ist kompatibel mit IE und Firefox
}

3. Alle Optionen löschen

Code kopieren
Der Code lautet wie folgt:

Funktion entferneAlles(){
var obj = document.getElementById('meineAuswahl');
obj.options.Länge=0;
}

4. Eine Option löschen

Code kopieren
Der Code lautet wie folgt:

Funktion entferneEins(){
var obj = document.getElementById('meineAuswahl');
//Index, die Seriennummer der zu löschenden Option, hier ist die Seriennummer der aktuell ausgewählten Option
var index=obj.selectedIndex;
obj.optionen.entfernen(index);
}

5. Holen Sie sich den Wert der Option Option

Code kopieren
Der Code lautet wie folgt:

var obj = document.getElementById('meineAuswahl');
var index=obj.selectedIndex; //Seriennummer, holen Sie sich die Seriennummer der aktuell ausgewählten Option
var val = obj.Optionen[Index].Wert;

6. Holen Sie sich den Text der Option Option

Code kopieren
Der Code lautet wie folgt:

var obj = document.getElementById('meineAuswahl');
var index=obj.selectedIndex; //Seriennummer, holen Sie sich die Seriennummer der aktuell ausgewählten Option
var val = obj.Optionen[index].text;

7. Option ändern

Code kopieren
Der Code lautet wie folgt:

var obj = document.getElementById('meineAuswahl');
var index=obj.selectedIndex; //Seriennummer, holen Sie sich die Seriennummer der aktuell ausgewählten Option
var val = obj.options[index]=new Option("neuer Text","neuer Wert");

8. Auswahl löschen

Code kopieren
Der Code lautet wie folgt:

Funktion entfernenSelect(){
var meineAuswahl = document.getElementById("meineAuswahl");
meineAuswahl.parentNode.removeChild(meineAuswahl);
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html">
<Kopf>
<Skriptsprache=JavaScript>
Funktion $(id)
{
gibt document.getElementById(id) zurück
}
Funktion show()
{
var selectObj=$("Bereich")
var meineOption = document.createElement("option")
myOption.setAttribute("Wert","10")
myOption.appendChild(document.createTextNode("Untergeordneter Knoten"))
var meineOption1 = document.createElement("option")
myOption1.setAttribute("Wert","100")
myOption1.appendChild(document.createTextNode("Untergeordnet"))
selectObj.appendChild(meineOption)
selectObj.appendChild(meineOption1)
}
Funktion Auswahl()
{
var index=$("Bereich").selectedIndex;
var val = $("Bereich").Optionen[Index].getAttribute("Wert")
wenn(Wert==10)
{
var i=$("Kontext").childNodes.length-1;
var remobj=$("Kontext").childNodes[i];
remobj.removeNode(true)
var sh = document.createElement("Auswählen")
sh.add(neue Option("Pudong New Area","101"))
sh.add(neue Option("Bezirk Huangpu","102"))
sh.add(neue Option("Bezirk Xuhui","103"))
sh.add(neue Option("Bezirk Putuo","104"))
$("Kontext").appendChild(sh)
}
wenn(Wert==100)
{
var i=$("Kontext").childNodes.length-1;
var remobj=$("Kontext").childNodes[i];
remobj.removeNode(true)
var nj = document.createElement("Auswählen")
nj.add(neue Option("Bezirk Xuanwu","201"))
nj.add(neue Option("Neue Option","202"))
nj.add(neue Option("Bezirk Xiaguan","203"))
nj.add(neue Option("Qixia-Bezirk","204"))
$("Kontext").appendChild(nj)
}
}
Funktion calc()
{
var x=$("Kontext").childNodes.length-1;
Alarm(x)
}
Funktion entfernen()
{
var i=$("Kontext").childNodes.length-1;
var remobj=$("Kontext").childNodes[i];
remobj.removeNode(true)
}
</Skript>
<Text>
<div id="Kontext">
<select id="area" auf
ändern="Auswahl()">
</Auswählen>
</div>
<input type=button value="Anzeigen" onclick="anzeigen()">
<input type=button value="Knoten berechnen" onclick="calc()">
<input type=button value="Löschen" onclick="remove()">
</body>
</html>

Basierend auf diesen Dingen habe ich JQEURY AJAX+JSON verwendet, um eine kleine Funktion wie folgt zu implementieren:
JS-Code: (nur der mit SELECT in Zusammenhang stehende Code wird übernommen)

Code kopieren
Der Code lautet wie folgt:

/**
* @description Dropdown-Liste zur Komponentenverknüpfung (implementiert mit AJAX und JSON von JQUERY)
* @prarm selectId Dropdown-Listen-ID
* @prarm method Der Name der aufzurufenden Methode
* @prarm temp Hier wird die Software-ID gespeichert
* @prarm url Die Adresse, zu der gesprungen werden soll
*/
Funktion linkAgeJson(selectId,Methode,temp,url){
$j.ajax({
Typ: "get", //Verwenden Sie die get-Methode, um auf das Backend zuzugreifen
dataType: "json", //Daten im JSON-Format zurückgeben
url: url, //Backend-Adresse für den Zugriff
data: "method=" + method+"&temp="+temp, //zu sendende Daten
Erfolg: Funktion (msg) {//msg sind die zurückgegebenen Daten, die Datenbindung wird hier durchgeführt
var Daten = Nachrichtenlisten;
coverJsonToHtml(selectId,data);
}
});
}
/**
* @description Konvertiert JSON-Daten in das HTML-Datenformat
* @prarm selectId Dropdown-Listen-ID
* @prarm nodeArray hat ein JSON-Array zurückgegeben
*
*/
Funktion coverJsonToHtml(selectId,nodeArray){
//Auswahl abrufen
var tempSelect=$j("#"+selectId);
//Auswahlwert löschen
istClearSelect(selectId,'0');
var tempOption=null;
für(var i=0;i<nodeArray.length;i++){
//Auswahloption erstellen
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
//Option zur Auswahl setzen
tempSelect.append(tempOption);
}
// Liste der degradierten Komponenten abrufen
getCpgjThgl(selectId,'thgjDm');
}
/**
* @description Löscht den Wert der Dropdown-Liste
* @prarm selectId Dropdown-Listen-ID
* @prarm index Die Indexposition, an der mit dem Löschen begonnen werden soll
*/
Funktion istClearSelect(selectId,index){
var Länge = document.getElementById(selectId).options.length;
während(Länge!=Index){
//Die Länge ändert sich, da sie neu erfasst werden muss
Länge=document.getElementById(selectId).options.length;
für (var i = Index; i < Länge; i++)
: Dokument.getElementById(selectId).options.remove(i);
Länge=Länge/2;
}
}
/**
* @description Holen Sie sich die Liste der degenerierten Komponenten
* @prarm selectId1 verweist auf die ID der Software-Dropdown-Liste
* @prarm selectId2 ID der Dropdown-Liste der degenerierten Komponenten
*/
Funktion getCpgjThgl(selectId1,selectId2){
var obj1=document.getElementById(selectId1); //Dropdown-Liste für Referenzsoftware
var obj2=document.getElementById(selectId2); //Dropdown-Liste für degenerierte Komponenten
var len=obj1.options.length;
//Wenn die Länge der referenzierten Softwareliste gleich 1 ist, zurückgehen und nichts tun
wenn(länge==1){
gibt false zurück;
}
// Lösche den Wert der Dropdown-Liste, beide Methoden sind OK
// istClearSelect(selectId2,'1');
Dokument.getElementById(selectId2).length=1;
für(var i=0;i<len; i++){
var option = obj1.optionen[i];
//Die Referenzsoftware ist ausgewählt und nicht im Lieferumfang enthalten.
wenn(i!=obj1.selectedIndex){
//OPTION klonen und zu SELECT hinzufügen
obj2.appendChild(option.cloneNode(true));
}
}
}

HTML Quelltext:

Code kopieren
Der Code lautet wie folgt:

<Tabelle Breite="100%" Rahmen=0 Ausrichtung="links" Zellabstand=0 Zellabstand=1>
<tr>
<td class="Search_item_18"> <span class="Edit_mustinput">*</span>Zitierungssoftware:</td>
<td class="Suchinhalt_82">
<Eingabename="yyrjMc" ID="yyrjMc" Typ="Text" Klasse="Search_input" Tabindex="3" Größe="30" >
<Eingabename="yyrjDm" ID="yyrjDm" Typ="versteckt" >
<Eingabetyp="Schaltfläche" Klasse="Suchschaltfläche_auswählen"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="Auswählen...">
</td>
</tr>
<tr>
<td class="Search_item"> <span class="Edit_mustinput">*</span>Zitatversion:</td>
<td class="Suchinhalt" id="yyfb">
<Name auswählen="yyfbDm" Stil="Breite:160" ID="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</Auswählen>
</td>
</tr>
<tr>
<td class="Search_item">Beschädigte Komponenten:</td>
<td class="Suchinhalt" id="thgj">
<Name auswählen="thgjDm" Stil="Breite:160" ID="thgjDm">
<option value="-1" selected>Keine</option>
</Auswählen>
</td>
</tr>
</TABLE>

<<:  Detaillierte Erläuterung der bidirektionalen Bindung von Vue

>>:  CSS3 verwendet Animationsattribute, um coole Effekte zu erzielen (empfohlen)

Artikel empfehlen

Implementierung der CSS-Bildlaufleisten-Stileinstellungen

WebKit-Bildlaufleistenstil zurücksetzen 1. Die Bi...

Detaillierte Erklärung zweier Tabellenkopieranweisungen: SELECT INTO und INSERT INTO SELECT (Unterschiede zwischen SQL-Datenbank und Oracle-Datenbank)

1. INSERT INTO SELECT-Anweisung Das Anweisungsfor...

Vue implementiert die Bildfrequenzwiedergabe des Karussells

In diesem Artikelbeispiel wird der spezifische Co...

Vue implementiert Div-Rad zum Vergrößern und Verkleinern

Implementieren Sie das Vergrößern und Verkleinern...

Detaillierte Erklärung zum Erstellen einer Datentabelle in MySQL und zum Herstellen von Primär- und Fremdschlüsselbeziehungen

Vorwort Beim Anlegen der Primär- und Fremdschlüss...

HTML-Endtag-Problem und W3C-Standard

Gemäß den Grundsätzen des W3C muss jedes Start-Tag...

Zusammenfassung gängiger Optimierungsvorgänge der MySQL-Datenbank (Erfahrungsaustausch)

Vorwort Bei einer datenzentrierten Anwendung wirk...

MySQL 8.0.19 Installations-Tutorial

Laden Sie das Installationspaket von der offiziel...

Gegenfall für die Vue-Implementierung

In diesem Artikelbeispiel wird der spezifische Co...

VUE implementiert eine Timeline-Wiedergabekomponente

In diesem Artikelbeispiel wird der spezifische Co...

Linux-Checkup: Erfahren Sie mehr über Ihren Linux-Status (Netzwerk-E/A, Festplatte, CPU, Speicher)

Inhaltsverzeichnis 1. Kernbefehle 2. Allgemeine B...

Erläuterung zur Verwendung von „if“-Beurteilungsbedingungen in Summen- und Zählfunktionen bei der Verwendung von SQL-Anweisungen zum Sammeln von Daten

Lassen Sie mich zunächst ein Beispiel geben (wenn...

Vue implementiert rekursiv ein dreistufiges Menü

In diesem Artikelbeispiel wird der spezifische Co...

Fallerklärung für den Nginx-Reverse-Proxy zu Go-FastDFS

Hintergrund go-fastdfs ist ein verteiltes Dateisy...

Reines CSS zum Hinzufügen von Stil zur ausgewählten Implementierung (kein Skript)

Ändern Sie den Standardstil der Auswahl, normalerw...