Ein Grundverständnis:
var e = document.getElementById("selectId");
e. Optionen= neue Option("text","value");
//Erstellen Sie ein Optionsobjekt, dh erstellen Sie einen oder mehrere <option value="value">text</option> im <select>-Tag
//options ist ein Array, das mehrere Tags speichern kann, z. B. <option value="value">text</option>
1: Eigenschaften des Options[]-Arrays:
Längenattribut---------Längenattribut
selectedIndex-Attribut--------Der Indexwert des Texts im aktuell ausgewählten Feld. Dieser Indexwert wird automatisch vom Speicher (0,1,2,3...) entsprechend (dem ersten Textwert) zugewiesen , zweiter Textwert, dritter Textwert, vierter Textwert...)
2: Attribute einer einzelnen Option (---obj.options[obj.selectedIndex] ist ein angegebenes <option>-Tag, das ein --- ist)
Textattribut---------Text zurückgeben/angeben
Wertattribut------Wert zurückgeben/angeben, konsistent mit <options value="...">.
Indexattribut-------gibt den Index zurück,
selected attribute ------- Gibt zurück/gibt an, ob das Objekt ausgewählt ist. Durch Angabe von true oder false kann das ausgewählte Element dynamisch geändert werden
defaultSelected-Attribut-----Gibt zurück, ob das Objekt standardmäßig ausgewählt ist. wahr/falsch.
3: Optionsmethode
Fügen Sie ein <option>-Tag hinzu-----obj.options.add(new("text","value"));<add>
Löschen Sie ein <option>-Tag-----obj.options.remove(obj.selectedIndex)<delete>
Rufen Sie den Text eines <option>-Tags ab -----obj.options[obj.selectedIndex].text<check>
Ändern Sie den Wert eines <option>-Tags-----obj.options[obj.selectedIndex]=new Option("new text","new value")<change>
Entfernen Sie alle <option>-Tags -----obj.options.length = 0
Rufen Sie den Wert eines <option>-Tags ab: obj.options[obj.selectedIndex].value
Beachten:
a: Die obige Methode wird wie diese Art von Methode obj.options.function() anstelle von obj.funciton geschrieben, da obj.add() nur im IE gültig ist, um die Kompatibilität unter IE und FF zu berücksichtigen.
b: Die Option in obj.option muss nicht großgeschrieben werden, und die Option in new Option muss großgeschrieben werden.
Zwei Anwendungen
Kopieren Sie den Codecode wie folgt:
<html>
<Kopf>
<script language="javascript">
Funktionsnummer(){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("My Eat","4");//Änderung des Werts der aktuell ausgewählten Option
//obj.options.add(new Option("My food","4"));Eine weitere Option hinzufügen
//alert(obj.selectedIndex);//Seriennummer anzeigen, Option wird von selbst gesetzt
//obj.options[obj.selectedIndex].text = „Mein Essen“; Wert ändern
//obj.remove(obj.selectedIndex); Löschfunktion
}
</script>
</head>
<Körper>
<select id="mySelect">
<option>Meine Tasche</option>
<option>Mein Notizbuch</option>
<option>Mein Öl</option>
<option>Meine Last</option>
</select>
<input type="button" name="button" value="Ergebnisse anzeigen" onclick="number();">
</body>
</html>
Basierend auf diesen Dingen habe ich mit JQEURY AJAX+JSON eine kleine Funktion wie folgt implementiert:
JS-Code: (nur der Code im Zusammenhang mit SELECT wird verwendet)
Kopieren Sie den Codecode wie folgt:
/**
* @description Dropdown-Liste für Komponentenverknüpfung (implementiert mit AJAX und JSON von JQUERY)
* @prarm selectId ID der Dropdown-Liste
* @prarm-Methode Der Name der aufzurufenden Methode
* @prarm temp Die Software-ID wird hier gespeichert
* @prarm url Die Adresse, zu der gesprungen werden soll
*/
Funktion linkAgeJson(selectId,method,temp,url){
$j.ajax({
Typ: „get“,//Verwenden Sie die get-Methode, um auf den Hintergrund zuzugreifen
dataType: „json“, // Daten im JSON-Format zurückgeben
URL: URL,//Backend-Adresse, auf die zugegriffen werden soll
Daten: "method=" + method+"&temp="+temp,//Zu sendende Daten
success: function(msg){//msg sind die zurückgegebenen Daten, die Datenbindung erfolgt hier
var data = msg.lists;
coverJsonToHtml(selectId,data);
}
});
}
/**
* @description JSON-Daten in das HTML-Datenformat konvertieren
* @prarm selectId ID der Dropdown-Liste
* @prarm nodeArray hat ein JSON-Array zurückgegeben
*
*/
Funktion coverJsonToHtml(selectId,nodeArray){
//Auswahl erhalten
var tempSelect=$j("#"+selectId);
//Auswahlwert löschen
isClearSelect(selectId,'0');
var tempOption=null;
for(var i=0;i<nodeArray.length;i++){
//Auswahloption erstellen
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
//Put-Option zur Auswahl
tempSelect.append(tempOption);
}
// Liste der beschädigten Komponenten abrufen
getCpgjThgl(selectId,'thgjDm');
}
/**
* @description Löschen Sie den Wert der Dropdown-Liste
* @prarm selectId ID der Dropdown-Liste
* @prarm index Die Indexposition, an der mit dem Löschen begonnen werden soll
*/
Funktion isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length;
while(length!=index){
//Die Länge ändert sich, da sie neu erfasst werden muss
length=document.getElementById(selectId).options.length;
for(var i=index;i<länge;i++)
document.getElementById(selectId).options.remove(i);
Länge=Länge/2;
}
}
/**
* @description Ruft die Liste der beeinträchtigten Komponenten ab
* @prarm selectId1 bezieht sich 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 der Referenzsoftware
var obj2=document.getElementById(selectId2);//Dropdown-Liste „Komponente degenerieren“.
var len=obj1.options.length;
//Wenn die Länge der referenzierten Softwareliste gleich 1 ist, wird sie zurückgegeben und es wird keine Operation ausgeführt.
if(len==1){
return false;
}
//Löschen Sie den Wert der Dropdown-Liste. Beide Methoden sind verfügbar
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;i<len; i++){
var option= obj1.options[i];
//Die ausgewählten Elemente, auf die die Software verweist, werden nicht hinzugefügt
if(i!=obj1.selectedIndex){
// OPTION klonen und zu SELECT hinzufügen
obj2.appendChild(option.cloneNode(true));
}
}
}
HTML-Code:
Kopieren Sie den Codecode wie folgt:
<TABLE border=0 align="left" cellPadding=0 cellSpacing=1>
<tr>
<td> <span>*</span>Angebotssoftware:</td>
<td>
<input name="yyrjMc" id="yyrjMc" type="text" tabindex="3" size="30" >
<input name="yyrjDm" id="yyrjDm" type="hidden" >
<input type="button"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="Select...">
</td>
</tr>
<tr>
<td> <span>*</span>Angebotsversion:</td>
<td id="yyfb">
<select name="yyfbDm" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</select>
</td>
</tr>
<tr>
<td>Entartete Komponenten:</td>
<td id="thgj">
<select name="thgjDm" id="thgjDm">
<option value="-1" selected>Keine</option>
</select>
</td>
</tr>
</TABLE>