Les exemples de cet article partagent les effets spéciaux du menu déroulant JS pour votre référence. Le contenu spécifique est le suivant
Exemple 1: menu déroulant provincial et municipal lié
L'événement Onchange se produit lorsque le contenu du domaine change.
<script type = "text / javascript"> var arr = new Array (); // Array de données // Définir les données, structure: id, nom, parent id arr [arr.length] = [1, 'beijing', null]; arr [arr.length] = [2, 'Sichuan', null]; arr [arr.length] = [3, 'guangdong', null]; arr [arr.length] = [4, 'beijing', 1]; arr [arr.length] = [5, 'Chengdu', 2]; arr [arr.length] = [6, 'guangzhou', 3]; arr [arr.length] = [7, 'Shenzhen', 3]; // Réglage dynamique de la fonction d'élément de traction FillOptions (type) {if (type == 'province') {// Obtenez le dom du menu déroulant de la province var province = document.getElementById ("province"); province.innerhtml = ''; // Content vide premier // Remplissez le sous-personnage var prostr = '<option value = ""> </ option>'; // transférer le tableau pour (var i = 0; i <arr.length; i ++) {var item = arr [i]; // élément actuel // s'il n'y a pas d'ID parent, c'est la province if (item [2] == null) prostr + = '<option value =' + item [0] + '>' + item [1] + '</opoption>'; } province.innerhtml = prostr; // remplit le nouveau contenu} else if (type == 'city') {// Obtenez l'ID de la province actuelle var currproid = document.getElementById ("province"). valeur; if (currproid == '') return false; // Obtenez le dom du menu déroulant de la ville var ville = document.getElementByid ("ville"); city.innerhtml = ''; // Remplissez le contenu d'abord // Remplissez le caractère var citystr = '<option valeur = ""> </ option>'; // Transweep le tableau pour (var i = 0; i <arr.length; i ++) {var item = arr [i]; // Article actuel // juger si c'est la ville enregistrée actuelle if (item [2] == currproid) Citystr + = '<option valeur =' + item [0] + '>' + item [1] + '</opoption>'; } city.innerhtml = Citystr; // remplit le nouveau contenu}} </cript> <body style = "text-align: Center;" onload = "fillOptions ('province');"> <! - Définir le menu déroulant -> Économies: <select id = "province" onChange = "FillOptions ('City')"> </ Select> <br/> <br/> City: <Select Id = "City"> </lect> <br/> <br/> </odody>Exemple 2: liaison à trois niveaux des provinces, des villes et des comtés des menus déroulants
<script type = "text / javascript"> var arr = new Array (); // Array de données // Définir les données, structure: id, nom, parent id arr [arr.length] = [1, 'beijing', null]; arr [arr.length] = [2, 'Sichuan', null]; arr [arr.length] = [3, 'guangdong', null]; arr [arr.length] = [4, 'beijing', 1]; arr [arr.length] = [5, 'Chengdu', 2]; arr [arr.length] = [6, 'guangzhou', 3]; arr [arr.length] = [7, 'Shenzhen', 3]; arr [arr.length] = [8, 'Wuhou District', 5]; arr [arr.length] = [9, «district de Qingyang», 5]; arr [arr.length] = [10, «district de Baiyun», 6]; arr [arr.length] = [11, 'Zengcheng City', 6]; arr [arr.length] = [12, «Conghua City», 6]; // Réglage dynamique de la fonction de projet Pull-Down FillOptions (type) {if (type == 'province') {// Obtenez le dom du menu déroulant de la province var province = document.getElementById ("province"); province.innerhtml = ''; // Le contenu est vide d'abord // Remplissez les caractères du var protr = '<option valeur = ""> </opoption>'; for (var i = 0; i <arr.length; i ++) {// transférer le tableau var item = arr [i]; // élément actuel // s'il n'y a pas d'ID parent, c'est la province if (item [2] == null) prostr + = '<option value =' + item [0] + '>' + item [1] + '</opoption>'; } province.innerhtml = prostr; // Remplissez un nouveau contenu} else if (type == 'city') {// Obtenez l'ID de la province actuelle var currproid = document.getElementyid ("province"). Valeur; if (currproid == '') return false; // Obtenez le dom du menu déroulant de la ville var ville = document.getElementByid ("ville"); city.innerhtml = ''; // Content vide First // Rempliez le caractère de la ville var citystr = '<option value = ""> </ option>'; for (var i = 0; i <arr.length; i ++) {// transférer le tableau var item = arr [i]; // Article actuel // juge si c'est la ville actuellement enregistrée if (item [2] == currproid) Citystr + = '<option value =' + item [0] + '>' + item [1] + '</opoption>'; } city.innerhtml = Citystr; // Remplissez le nouveau contenu} else if (type == 'aire') {// Obtenez l'ID de la ville actuelle var currCityId = document.getElementById ("City"). Value; if (curcityId == '') return false; // Obtenez le DOM du district et du menu déroulant de comté Var Area = Document.GetElementById ("Area"); zone.innerhtml = ''; // Remplissez le district et les caractères du comté var zonesTr = '<option valeur = ""> </opoption>'; for (var i = 0; i <arr.length; i ++) {// transférer le tableau var item = arr [i]; // Article actuel // juge s'il s'agit d'un district ou d'un comté sous la ville actuelle if (article [2] == curcityId) rareTr + = '<option value =' + item [0] + '>' + item [1] + '</ option>'; } area.innerhtml = zoneTr; // Remplissez le nouveau contenu}} </ script> <Body Style = "Text-Align: Center;" onload = "fillOptions ('province');"> <! - Définir le menu déroulant -> Province: <select id = "province" onChange = "fillOptions ('city')"> </ select> <br/> <br/> City: <Select Id = "City" onChange = "FillOptions ('Area')"> </lect> <br/> id = "Area"> </ Select> <br/> <br/> </ body>Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.