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

Lösung für das Problem, dass VMware Workstation Pro aufgrund eines Win10-Updates nicht geöffnet werden kann

Als ich heute Abend nach dem Abendessen meinen La...

Grundprinzipien für die Zusammenstellung einer Website-Homepage

1. Die Organisationsstruktur des Hypertext-Dokumen...

js, um einen simulierten Einkaufszentrumsfall zu erreichen

Freunde, die HTML-, CSS- und JS-Frontend lernen, ...

Lösung für MySQL: Das Installationsprogramm wird im Community-Modus ausgeführt

Heute habe ich diese Eingabeaufforderung gefunden...

Detaillierte Erklärung der MySQL-Alter-Ignore-Syntax

Als ich heute bei der Arbeit war, wurde mir von d...

WeChat-Applet-Canvas implementiert Signaturfunktion

Im WeChat-Applet-Projekt umfasst das Entwicklungs...

Eine kurze Diskussion über die Unterschiede zwischen den drei wichtigsten Datenbanken: Mysql, SqlServer und Oracle

MySQL Vorteil: Kleine Größe, hohe Geschwindigkeit...

Warum wird für die Webseitenkodierung UTF-8 statt GBK oder GB2312 verwendet?

Wenn Sie die Wahl haben, sollten Sie UTF-8 verwen...

Tipps zur Implementierung von Listenschleifen-Scrollen basierend auf jQuery (super einfach)

Ich habe eine gute Idee gesehen und sie aufgezeic...

Installieren Sie MySQL 5.6 aus der Yum-Quelle im Centos7.4-System

Systemumgebung: centos7.4 1. Prüfen Sie, ob die D...

MySQL-Startfehler InnoDB: Sperren nicht möglich/ibdata1-Fehler

Beim Starten von MySQL in einer OS X-Umgebung wir...

28 berühmte Beispiele für Blog-Redesigns

1. WebDesignerWall 2. Veerles Blog 3. Lernprogram...

Der Alibaba Cloud ECS-Cloud-Server (Linux-System) kann nach der Installation von MySQL keine Remoteverbindung herstellen (Falle)

Gestern habe ich einen Alibaba Cloud-Server gekau...

Details der benutzerdefinierten Vue-Anweisung

Inhaltsverzeichnis 1. Hintergrund 2. Lokale benut...

Eine kurze Erläuterung, wann MySQL interne temporäre Tabellen verwendet

Gewerkschaftsexekution Verwenden Sie zur Vereinfa...