Version complète: jsB@nk » Form » Dropdown » DataBaseSel
URL: https://www.javascriptbank.com/datbassel.html
Une méthode de charger de multiples menus déroulants des précédentes sélections. Le nombre de menus déroulants peut facilement être modifié nécessaire. Le concept est d'obtenir des données de remplissage à partir d'une base de données pour la prochaine liste déroulante. Bien que les données dans l'exemple ne change pas avec la sélection, l'application se charge des valeurs appropriées de la base de données dans les menus déroulants. La récupération de données est simulé ici, c'est à l'utilisateur de récupérer les données et de charger les données en Array.
Version complète: jsB@nk » Form » Dropdown » DataBaseSel
URL: https://www.javascriptbank.com/datbassel.html
<script language="javascript"><!-- Original Programmed by Ira Sterbakov - irasterb@erols.com 1/8/05 --><!-- PLease keep credit in JavaScript section --><!-- May be freely used and modified - email notification would be nice -->var aDr= new Array()function SelDat(n){//n is the pointer to the next select list//get Data placed in aDr from databaseGetDat(n);// now that you have data, load the select list pointed to by nvar NewListad2 = eval('document.mess.us' + n);NewListad2.options.length = 0;for ( i1 = 0; i1 < aDr.length; i1++ ){NewListad2.options[i1] = new Option(aDr[i1].Description,aDr[i1].Id);}}function GetDat(ip){//THIS IS A SIMULATION OF PLACING THE DATA INTO THE aDr ARRAY// ip is the pointer to the chain, in this case 2 to get groups and 3 for names // get the value of the changed select list.var io = ip -1;var NewListad = eval('document.mess.us' + io);var VName = NewListad.value;// you get the DATA from VName and place in aDrdocument.getElementById('d' + ip).innerHTML = '<b>Came from ' + VName + '</b>';aDr.length = 0;var kk = new Array()kk = (ip==3) ? aNr : aGr;for ( ii = 0; ii < kk.length; ii++ ){aDr[ii] = kk[ii];}}//simulated results for category listvar aCr = new Array();aCr[0] = new Set2val('Cat0','category0');aCr[1] = new Set2val('Cat1','category1');aCr[2] = new Set2val('Cat2','category2');aCr[3] = new Set2val('Cat3','category3');// simulated results for group listvar aGr = new Array();aGr[0] = new Set2val('Gro0','Group0');aGr[1] = new Set2val('Gro1','Group1');aGr[2] = new Set2val('Gro2','Group2');aGr[3] = new Set2val('Gro3','Group3');aGr[4] = new Set2val('Gro4','Group4');aGr[5] = new Set2val('Gro5','Group5');//continue// simulated results for name listvar aNr = new Array();aNr[0] = new Set2val('Nam0','Name0');aNr[1] = new Set2val('Nam1','Name1');aNr[2] = new Set2val('Nam2','Name2');aNr[3] = new Set2val('Nam3','Name3');aNr[4] = new Set2val('Nam4','Name4');aNr[5] = new Set2val('Nam5','Name5');aNr[6] = new Set2val('Nam6','Name6');aNr[7] = new Set2val('Nam7','Name7');aNr[8] = new Set2val('Nam8','Name8');aNr[9] = new Set2val('Nam9','Name9');//continue//Id and Description can be same valuefunction Set2val(V1,V2){this.Id = V1;this.Description = V2;} // set categories into first dropdown from aCr here var NewListad0 = document.mess.us1;NewListad0.options.length = 0;for ( i1 = 0; i1 < aCr.length; i1++ ){NewListad0.options[i1] = new Option(aCr[i1].Description,aCr[i1].Id);}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><form name="mess"> <table cellpadding="4" border="0"> <tbody><tr> <td> <p><b>Category</b></p> </td> <td> <p><b><select style="" name="us1" onchange="SelDat(2)"><option value="Cat0">category0</option><option value="Cat1">category1</option><option value="Cat2">category2</option><option value="Cat3">category3</option></select></b></p> </td> </tr> <tr> <td> <p><b>Group</b></p> </td> <td> <p><select style="" name="us2" onchange="SelDat(3)"><option value="0" selected="selected">- None selected - </option></select></p> </td> <td> <div id="d2"> </div> </td> </tr> <tr> <td> <p><b>Name</b></p> </td> <td> <p><select name="us3" style=""><option value="0" selected="selected">- None selected - </option></select></p> </td> <td> <div id="d3"> </div> </td> </tr> </tbody></table> </form><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->