Une compréhension de base :
var e = document.getElementById("selectId");
e. options= new Option("texte","valeur");
//Créez un objet option, c'est-à-dire créez un ou plusieurs <option value="value">text</option> dans la balise <select>
//options est un tableau qui peut stocker plusieurs balises telles que <option value="value">text</option>
1 : Propriétés du tableau options[ ] :
attribut de longueur --------- attribut de longueur
Attribut selectedIndex--------La valeur d'index du texte dans la case actuellement sélectionnée. Cette valeur d'index est automatiquement allouée par la mémoire (0,1,2,3...) correspondant à (la première valeur de texte. , deuxième valeur de texte, troisième valeur de texte, quatrième valeur de texte...)
2 : Attributs d'une seule option (---obj.options[obj.selecedIndex] est une balise <option> spécifiée, qui est un ---)
attribut de texte --------- retourner/spécifier le texte
attribut de valeur------Renvoyer/spécifier une valeur, cohérente avec <options value="...">.
attribut index-------renvoie l'indice,
Attribut sélectionné ------- Renvoie/spécifie si l'objet est sélectionné En spécifiant vrai ou faux, l'élément sélectionné peut être modifié dynamiquement.
Attribut defaultSelected-----Renvoie si l'objet est sélectionné par défaut. vrai/faux.
3 : méthode des options
Ajoutez une balise <option> -----obj.options.add(new("text","value"));<add>
Supprimer une balise <option> -----obj.options.remove(obj.selectedIndex)<delete>
Récupère le texte d'une balise <option> -----obj.options[obj.selectedIndex].text<check>
Modifier la valeur d'une balise <option>-----obj.options[obj.selectedIndex]=new Option("new text","new value")<change>
Supprimer toutes les balises <option> -----obj.options.length = 0
Récupère la valeur d'une balise <option> -----obj.options[obj.selectedIndex].value
Avis:
a : La méthode ci-dessus est écrite comme ce type de méthode obj.options.function() au lieu de obj.funciton, car afin de prendre en compte la compatibilité sous IE et FF, comme obj.add() n'est valable que dans IE .
b : L'option dans obj.option n'a pas besoin d'être capitalisée, et l'option dans la nouvelle option doit être capitalisée.
Deux candidatures
Copiez le code comme suit :
<html>
<tête>
<langage de script="javascript">
numéro de fonction(){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("My Eat","4");//Changement de la valeur de celle actuellement sélectionnée
//obj.options.add(new Option("Ma nourriture","4"));Ajouter une autre option
//alert(obj.selectedIndex);//afficher le numéro de série, l'option est définie par elle-même
//obj.options[obj.selectedIndex].text = "Ma nourriture" ; modifier la valeur ;
//obj.remove(obj.selectedIndex); fonction de suppression
}
</script>
</tête>
<corps>
<select id="mySelect">
<option>Mon sac</option>
<option>Mon carnet</option>
<option>Mon huile</option>
<option>Mon fardeau</option>
</sélectionner>
<input type="button" name="button" value="Afficher les résultats" onclick="number();">
</corps>
</html>
Sur la base de ces éléments, j'ai implémenté une petite fonction en utilisant JQEURY AJAX+JSON comme suit :
Code JS : (seul le code lié à SELECT est pris)
Copiez le code comme suit :
/**
* @description Liste déroulante de liaison de composants (implémentée à l'aide d'AJAX et JSON de JQUERY)
* @prarm selectId ID de la liste déroulante
* Méthode @prarm Le nom de la méthode à appeler
* @prarm temp L'ID du logiciel est stocké ici
* @prarm url L'adresse à laquelle accéder
*/
fonction linkAgeJson(selectId,method,temp,url){
$j.ajax({
tapez : "get",//Utilisez la méthode get pour accéder à l'arrière-plan
dataType : "json",//Renvoyer les données au format json
url : url, //Adresse du backend à laquelle accéder
data : "method=" + method+"&temp="+temp,//Données à envoyer
succès : function(msg){//msg correspond aux données renvoyées, la liaison des données est effectuée ici
var data = msg.lists;
coverJsonToHtml(selectId,data);
}
});
}
/**
* @description Convertir les données JSON au format de données HTML
* @prarm selectId ID de la liste déroulante
* @prarm nodeArray a renvoyé un tableau JSON
*
*/
fonction coverJsonToHtml(selectId,nodeArray){
//obtient la sélection
var tempSelect=$j("#"+selectId);
//efface la valeur sélectionnée
isClearSelect(selectId,'0');
var tempOption=null;
pour(var i=0;i<nodeArray.length;i++){
//créer une option de sélection
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
//mettre l'option à sélectionner
tempSelect.append(tempOption);
}
// Récupère la liste des composants dégradés
getCpgjThgl(selectId,'thgjDm');
}
/**
* @description Effacer la valeur de la liste déroulante
* @prarm selectId ID de la liste déroulante
* @prarm index La position de l'index pour commencer l'effacement
*/
fonction isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length;
tandis que(longueur!=index){
//La longueur change car elle doit être réacquise
length=document.getElementById(selectId).options.length;
pour(var i=index;i<longueur;i++)
document.getElementById(selectId).options.remove(i);
longueur=longueur/2 ;
}
}
/**
* @description Récupère la liste des composants dégradés
* @prarm selectId1 fait référence à l'ID de la liste déroulante du logiciel
* @prarm selectId2 ID de la liste déroulante des composants dégénérés
*/
fonction getCpgjThgl(selectId1,selectId2){
var obj1=document.getElementById(selectId1);//Liste déroulante des logiciels de référence
var obj2=document.getElementById(selectId2);//Liste déroulante des composants dégénérés
var len=obj1.options.length;
//Lorsque la longueur de la liste de logiciels référencés est égale à 1, elle est renvoyée et aucune opération n'est effectuée.
si(len==1){
renvoie faux ;
}
//Efface la valeur de la liste déroulante, les deux méthodes sont disponibles
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
pour(var i=0;i<len; i++){
var option= obj1.options[i];
//Les éléments sélectionnés référencés par le logiciel ne sont pas ajoutés
si(i!=obj1.selectedIndex){
// Cloner OPTION et ajouter à SELECT
obj2.appendChild(option.cloneNode(true));
}
}
}
Code HTML :
Copiez le code comme suit :
<TABLE border=0 align="left" cellPadding=0 cellSpacing=1>
<tr>
<td> <span>*</span>Logiciel de devis :</td>
<td>
<input name="aajMc" id="aajMc" type="text" tabindex="3" size="30" >
<input name="yyrjDm" id="yyrjDm" type="hidden" >
<type d'entrée="bouton"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="Sélectionner...">
</td>
</tr>
<tr>
<td> <span>*</span>Version du devis :</td>
<td id="yyfb">
<select name="yyfbDm" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</sélectionner>
</td>
</tr>
<tr>
<td>Composants dégénérés :</td>
<td id="thgj">
<select name="thgjDm" id="thgjDm">
<option value="-1" selected>Aucun</option>
</sélectionner>
</td>
</tr>
</TABLE>