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

Vue: Wertübertragung zwischen Vater und Sohn, Wertübertragung zwischen Bruder und Kind, detaillierte Erläuterung

Inhaltsverzeichnis 1. Die übergeordnete Komponent...

8 JS reduziert Verwendungsbeispiele und reduzierte Betriebsmethoden

reduce Methode ist eine Array-Iterationsmethode. ...

7 Fähigkeiten, die Webdesigner haben müssen

Webdesign ist sowohl eine Wissenschaft als auch e...

JavaScript zum Erzielen eines Skin-Effekts (Ändern des Hintergrunds)

In diesem Artikel wird der spezifische JavaScript...

Fassen Sie die häufigsten Anwendungsprobleme von XHTML-Code zusammen

<br />Ich habe festgestellt, dass viele Leut...

Analyse des Prozesses zur Implementierung eines Nginx+Tomcat-Clusters unter Windwos

Einführung: Nginx (die Aussprache ist gleichbedeu...

Autotrash-Tool für Linux zum automatischen Löschen alter Junk-Dateien zu einem festgelegten Zeitpunkt

Autotrash ist ein Befehlszeilenprogramm, das den ...

Detaillierte Erklärung der Winkelinhaltsprojektion

Inhaltsverzeichnis Einzelne Inhaltsprojektion Mul...

HTML-Tags dl, dt, dd zum Erstellen einer Tabelle vs. Tabellenerstellungstabelle

Dadurch werden nicht nur die Kosten für die Entwic...

Linux-Tutorial zum Ersetzen von Zeichenfolgen mit dem Befehl sed

Um eine Zeichenfolge zu ersetzen, müssen wir das ...

Beispielanalyse der Verwendung gespeicherter MySQL-Prozeduren

Dieser Artikel beschreibt die Verwendung gespeich...

Zusammenfassung der Erfahrungen mit der browserübergreifenden Entwicklung (I) HTML-Tags

Fügen Sie der Seite einen DOCTYPE hinzu Da versch...

Python stellt eine Verbindung zur Datenbank her MySQL dekomprimierte Version Installationskonfiguration und aufgetretene Probleme

Einführung Heute habe ich gelernt, wie man mit Py...

Analyse von Beispielen für MySQL-Benutzerverwaltungsvorgänge

Dieser Artikel beschreibt die MySQL-Benutzerverwa...

Zusammenfassung der Verwendung von TypeScript in React-Projekten

Vorwort Dieser Artikel konzentriert sich auf die ...