Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

while selecting a column in the listbox related colum to be populated in other listbo

Newbie
  
Join Date: Feb 2009
Posts: 27
#1: Mar 19 '09
Expand|Select|Wrap|Line Numbers
  1. 1. <head>
  2.    2. <script type="text/javascript">
  3.    3. </script>
  4.    4.   </head>
  5.    5. <body>
  6.    6. <form>
  7.    7. <select name="team" id="mylist" >
  8.    8. <option></option>
  9.    9. <option>north</option>
  10.   10. <option>south</option>
  11.   11. <option>east</option>
  12.   12. <option>west</option>
  13.   13. </select>
  14.   14.  
  15.   15. <select name="assignedto" id="mylist1" >
  16.   16.     <option></option>
  17.   17.     <option>rose</option>
  18.   18.     <option>lily</option>
  19.   19.     <option>lotus</option>
  20.   20.     <option>basil</option>
  21.   21.     <option>iris</option>
  22.   22.     <option>champa</option>
  23.   23.     <option>orchid</option>
  24.   24.     <option>sonki</option>
  25.   25.     </select>
  26.   26. </form>
  27.   27. </body>
  28.   28. </html>
  29.  

Newbie
  
Join Date: Feb 2009
Posts: 27
#2: Mar 19 '09

re: while selecting a column in the listbox related colum to be populated in other listbo

hi all,

Two listboxes are there, one populated with countries and other populated with the states.

My question is that when u select a country from one listbox,the other listbox should be populated with the values related to that particular country.

Say for example if india is selected from one listbox the states like tamiladu,rajasthan,karnataka etc to be populated in the second listbox so that we choose from that.

I hope that i will get a solution for this

thanks
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,136
#3: Mar 19 '09

re: while selecting a column in the listbox related colum to be populated in other listbo

threads merged ... don't post questions in the insights-section and use the coe-tags when posting source code.

regards,
MOD
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Mar 19 '09

re: while selecting a column in the listbox related colum to be populated in other listbo

The exact solution you're looking for depends on a few things:
1. Do you want to avoid a page reload/unload? If yes, then it's either Ajax or plain JavaScript.
2. Will the code be retrieved from the server each time or will it all be loaded the first time?
3. Do you want it to be triggered immediately or after clicking a button?
4. What format will the data be in?
Newbie
  
Join Date: Feb 2009
Posts: 27
#5: Mar 20 '09

re: while selecting a column in the listbox related colum to be populated in other listbo

Hi acoder,

no need to be a page reload,let it be a plain javascript.
it will be loaded the first time
it should be triggered once we select the value from one selection box
it is a text data

there list boxes are going to be inside a form where we have many form navigation

kindly find the attachment where i have given the image of the two list boxes and how it should work

Thanks in advance
Attached Thumbnails
sample1.jpg  
Newbie
  
Join Date: Feb 2009
Posts: 27
#6: Mar 20 '09

re: while selecting a column in the listbox related colum to be populated in other listbo

the next condition if its going to be another team the output is as follows in the image(the same listboxes only) but different condition

i hope it could be understood

thanks in advance
Attached Thumbnails
sample2.jpg  
Newbie
  
Join Date: Feb 2009
Posts: 27
#7: Mar 20 '09

re: while selecting a column in the listbox related colum to be populated in other listbo

Expand|Select|Wrap|Line Numbers
  1. =javascript
  2.  
  3. <html>
  4. <head>
  5.  
  6. <script language="javascript" >
  7.  
  8. function fillteam()
  9. { 
  10.  // this function is used to fill the team list on load
  11. addOption(document.frm1.team, "North", "North", "");
  12. addOption(document.frm1.team, "South", "South", "");
  13. addOption(document.frm1.team, "East", "East", "");
  14. addOption(document.frm1.team, "West", "West", "");
  15. }
  16. function Selectassignedto()
  17. {
  18.  
  19. removeAllOptions(document.frm1.assignedto);
  20. addOption(document.frm1.assignedto, "", "ASSIGNEDTO", "");
  21.  
  22. if(document.frm1.team.value == 'North')
  23.     {
  24.     addOption(document.frm1.assignedto,"Rose", "Rose");
  25.     addOption(document.frm1.assignedto,"Lily", "Lily");
  26.  
  27.     }
  28. if(document.frm1.team.value == 'South')
  29.     {
  30.     addOption(document.frm1.assignedto,"Basil", "Basil");
  31.     addOption(document.frm1.assignedto,"Lotus", "Lotus");
  32.  
  33.     }
  34. if(document.frm1.team.value == 'East')
  35.     {
  36.     addOption(document.frm1.assignedto,"Champa", "Champa");
  37.     addOption(document.frm1.assignedto,"Sonki", "Sonki");
  38.  
  39.     }
  40. if(document.frm1.team.value == 'West')
  41.     {
  42.         addOption(document.frm1.assignedto,"Iris", "Iris", "");
  43.         addOption(document.frm1.assignedto,"Orchid", "Orchid");
  44.     }
  45.  
  46. }
  47.  
  48.  
  49. function removeAllOptions(selectbox)
  50. {
  51.     var i;
  52.     for(i=selectbox.options.length-1;i>=0;i--)
  53.     {
  54.  
  55.         selectbox.remove(i);
  56.     }
  57. }
  58.  
  59.  
  60. function addOption(selectbox, value, text )
  61. {
  62.     var optn = document.createElement("OPTION");
  63.     optn.text = text;
  64.     optn.value = value;
  65.  
  66.     selectbox.options.add(optn);
  67. }
  68.  
  69. </script>
  70. </head>
  71.  
  72. <form name="frm1" method="post" action="">
  73.  
  74. <table>
  75. <TR>
  76.     <th>Team<font color="red">*</font>
  77. </th><td>
  78. <body onload="fillteam();">
  79.  
  80. <select name="team" onChange="Selectassignedto();" >
  81. <option>TEAM</option>
  82.  
  83. </select>
  84. </td>
  85.     <th>Assigned To</th>
  86.     <TD>
  87.     <select name="assignedto">
  88.     <option>ASSIGNEDTO</option>
  89.  
  90.     </select>
  91.  
  92.  
  93.     </TD>
  94. </TR>
  95.  
  96.  
  97. </form>
  98.  
  99. <form name="frm" action="" method="POST"  />
  100.  
  101.  <link rel="STYLESHEET" type="text/css" href="styles/calendar.css">
  102.  
  103.     <script language="JavaScript"  type="text/javascript">
  104.  
  105.  
  106.     var timeoutDelay = 2000; // milliseconds, change this if you like, set to 0 for the calendar to never auto disappear
  107.     var g_startDay = 0// 0=sunday, 1=monday
  108.  
  109.     // preload images
  110.     var imgUp = new Image(8,12);
  111.     imgUp.src = 'images/up.gif';
  112.     var imgDown = new Image(8,12);
  113.     imgDown.src = 'images/down.gif';
  114.  
  115.     // used by timeout auto hide functions
  116.     var timeoutId = false;
  117.  
  118.     // the now standard browser sniffer class
  119.     function Browser(){
  120.       this.dom = document.getElementById?1:0;
  121.       this.ie4 = (document.all && !this.dom)?1:0;
  122.       this.ns4 = (document.layers && !this.dom)?1:0;
  123.       this.ns6 = (this.dom && !document.all)?1:0;
  124.       this.ie5 = (this.dom && document.all)?1:0;
  125.       this.ok = this.dom || this.ie4 || this.ns4;
  126.       this.platform = navigator.platform;
  127.     }
  128.     var browser = new Browser();
  129.  
  130.     // dom browsers require this written to the HEAD section
  131.  
  132.     if (browser.dom || browser.ie4){
  133.         document.writeln('<style>');
  134.         document.writeln('#container {');
  135.         document.writeln('position : absolute;');
  136.         document.writeln('left : 100px;');
  137.         document.writeln('top : 100px;');
  138.         document.writeln('width : 124px;');;
  139.         browser.platform=='Win32'?height=140:height=145;
  140.         document.writeln('height : ' + height +'px;');
  141.         document.writeln('clip:rect(0px 124px ' + height + 'px 0px);');
  142.         //document.writeln('overflow : hidden;');
  143.         document.writeln('visibility : hidden;');
  144.         document.writeln('background-color : #ffffff');
  145.         document.writeln('}');
  146.         document.writeln('</style>')
  147.         document.write('<div id="container"');
  148.         if (timeoutDelay) document.write(' onmouseout="calendarTimeout();" onmouseover="if (timeoutId) clearTimeout(timeoutId);"');
  149.         document.write('></div>');
  150.     }
  151.  
  152.     var g_Calendar;  // global to hold the calendar reference, set by constructor
  153.  
  154.     function calendarTimeout(){
  155.       if (browser.ie4 || browser.ie5){
  156.         if (window.event.srcElement && window.event.srcElement.name!='month') timeoutId=setTimeout('g_Calendar.hide();',timeoutDelay);
  157.       }
  158.       if (browser.ns6 || browser.ns4){
  159.         timeoutId=setTimeout('g_Calendar.hide();',timeoutDelay);
  160.       }
  161.     }
  162.  
  163.     // constructor for calendar class
  164.     function Calendar(){
  165.       g_Calendar = this;
  166.       // some constants needed throughout the program
  167.       this.daysOfWeek = new Array("Su","Mo","Tu","We","Th","Fr","Sa");
  168.       this.months = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
  169.       this.daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
  170.  
  171.       if (browser.ns4){
  172.         var tmpLayer = new Layer(127);
  173.         if (timeoutDelay){
  174.           tmpLayer.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
  175.           tmpLayer.onmouseover = function(event) { if (timeoutId) clearTimeout(timeoutId); };
  176.           tmpLayer.onmouseout = function(event) { timeoutId=setTimeout('g_Calendar.hide()',timeoutDelay);};
  177.         }
  178.         tmpLayer.x = 100;
  179.         tmpLayer.y = 100;
  180.         tmpLayer.bgColor = "#ffffff";
  181.       }
  182.       if (browser.dom || browser.ie4){
  183.         var tmpLayer = browser.dom?document.getElementById('container'):document.all.container;
  184.       }
  185.       this.containerLayer = tmpLayer;
  186.       if (browser.ns4 && browser.platform=='Win32') {
  187.         this.containerLayer.clip.height=134;
  188.         this.containerLayer.clip.width=127;
  189.       }
  190.  
  191.     }
  192.  
  193.      Calendar.prototype.getFirstDOM = function() {
  194.         var thedate = new Date();
  195.         thedate.setDate(1);
  196.         thedate.setMonth(this.month);
  197.         thedate.setFullYear(this.year);
  198.         return thedate.getDay();
  199.     }
  200.  
  201.     Calendar.prototype.getDaysInMonth = function (){
  202.        if (this.month!=1) {
  203.        return this.daysInMonth[this.month]
  204.        }
  205.        else {
  206.          // is it a leap year
  207.             if (Date.isLeapYear(this.year)) {
  208.               return 29;
  209.             }
  210.             else {
  211.               return 28;
  212.             }
  213.        }
  214.     }
  215.  
  216.     Calendar.prototype.buildString = function(){
  217.       var tmpStr = '<form onSubmit="this.year.blur();return false;"><table width="100%" border="0" cellspacing="0" cellpadding="2" class="calBorderColor"><tr><td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="1" class="calBgColor">';
  218.       tmpStr += '<tr>';
  219.       tmpStr += '<td width="60%" class="cal" align="left">';
  220.       if (this.hasDropDown) {
  221.         tmpStr += '<select class="month" name="month" onchange="g_Calendar.selectChange();">';
  222.         for (var i=0;i<this.months.length;i++){
  223.           tmpStr += '<option value="' + i + '"' 
  224.           if (i == this.month) tmpStr += ' selected';
  225.           tmpStr += '>' + this.months[i] + '</option>';
  226.         }
  227.         tmpStr += '</select>';
  228.       } else {
  229.         tmpStr += '<table border="0" cellspacing="0" cellpadding="0"><tr><td><a href="javascript: g_Calendar.changeMonth(-1);"><img name="calendar" src="images/down.gif" width="8" height="12" border="0" alt=""></a></td><td class="cal" width="100%" align="center">' + this.months[this.month] + '</td><td class="cal"><a href="javascript: g_Calendar.changeMonth(+1);"><img name="calendar" src="images/up.gif" width="8" height="12" border="0" alt=""></a></td></tr></table>';
  230.       }
  231.       tmpStr += '</td>';
  232.       /* observation : for some reason if the below event is changed to 'onChange' rather than 'onBlur' it totally crashes IE (4 and 5)!
  233.       */
  234.       tmpStr += '<td width="40%" align="right" class="cal">';
  235.  
  236.       if (this.hasDropDown) { 
  237.         tmpStr += '<input class="year" type="text" size="';
  238.         // get round NS4 win32 lenght of year input problem
  239.         (browser.ns4 && browser.platform=='Win32')?tmpStr += 1:tmpStr += 4;
  240.       tmpStr += '" name="year" maxlength="4" onBlur="g_Calendar.inputChange();" value="' + this.year + '">';
  241.       } else {
  242.       tmpStr += '<table border="0" cellspacing="0" cellpadding="0"><tr><td class="cal"><a href="javascript: g_Calendar.changeYear(-1);"><img name="calendar" src="images/down.gif" width="8" height="12" border="0" alt=""></a></td><td class="cal" width="100%" align="center">' + this.year + '</td><td class="cal"><a href="javascript: g_Calendar.changeYear(+1);"><img name="calendar" src="images/up.gif" width="8" height="12" border="0" alt=""></a></td></tr></table>'
  243.       }
  244.       tmpStr += '</td>';
  245.       tmpStr += '</tr>';
  246.       tmpStr += '</table>';
  247.       var iCount = 1;
  248.  
  249.       var iFirstDOM = (7+this.getFirstDOM()-g_startDay)%7; // to prevent calling it in a loop
  250.  
  251.       var iDaysInMonth = this.getDaysInMonth(); // to prevent calling it in a loop
  252.  
  253.       tmpStr += '<table width="100%" border="0" cellspacing="0" cellpadding="1" class="calBgColor">';
  254.       tmpStr += '<tr>';
  255.         for (var i=0;i<7;i++){
  256.           tmpStr += '<td align="center" class="calDaysColor">' + this.daysOfWeek[(g_startDay+i)%7] + '</td>';
  257.         }
  258.       tmpStr += '</tr>';
  259.       var tmpFrom = parseInt('' + this.dateFromYear + this.dateFromMonth + this.dateFromDay,10);
  260.       var tmpTo = parseInt('' + this.dateToYear + this.dateToMonth + this.dateToDay,10);
  261.       var tmpCompare;
  262.       for (var j=1;j<=6;j++){
  263.          tmpStr += '<tr>';
  264.          for (var i=1;i<=7;i++){
  265.            tmpStr += '<td width="16" align="center" '
  266.            if ( (7*(j-1) + i)>=iFirstDOM+1  && iCount <= iDaysInMonth){
  267.              if (iCount==this.day && this.year==this.oYear && this.month==this.oMonth) tmpStr += 'class="calHighlightColor"';
  268.              else {
  269.                 if (i==7-g_startDay || i==((7-g_startDay)%7)+1) tmpStr += 'class="calWeekend"';
  270.                 else tmpStr += 'class="cal"';
  271.              }
  272.              tmpStr += '>';
  273.              /* could create a date object here and compare that but probably more efficient to convert to a number
  274.                and compare number as numbers are primitives */
  275.              tmpCompare = parseInt('' + this.year + padZero(this.month) + padZero(iCount),10);
  276.              if (tmpCompare >= tmpFrom && tmpCompare <= tmpTo) {
  277.                tmpStr += '<a class="cal" href="javascript: g_Calendar.clickDay(' + iCount + ');">' + iCount + '</a>';
  278.              } else {
  279.                tmpStr += '<span class="disabled">' + iCount + '</span>';
  280.              }
  281.              iCount++;
  282.            } else {
  283.              if  (i==7-g_startDay || i==((7-g_startDay)%7)+1) tmpStr += 'class="calWeekend"'; else tmpStr +='class="cal"';
  284.              tmpStr += '>&nbsp;';
  285.            }
  286.            tmpStr += '</td>'
  287.          }
  288.          tmpStr += '</tr>'
  289.       }
  290.       tmpStr += '</table></td></tr></table></form>'
  291.       return tmpStr;
  292.     }
  293.  
  294.     Calendar.prototype.selectChange = function(){
  295.       this.month = browser.ns6?this.containerLayer.ownerDocument.forms[0].month.selectedIndex:this.containerLayer.document.forms[0].month.selectedIndex;
  296.       this.writeString(this.buildString());
  297.     }
  298.  
  299.     Calendar.prototype.inputChange = function(){
  300.       var tmp = browser.ns6?this.containerLayer.ownerDocument.forms[0].year:this.containerLayer.document.forms[0].year;
  301.       if (tmp.value >=1900 || tmp.value <=2100){
  302.         this.year = tmp.value;
  303.         this.writeString(this.buildString());
  304.       } else {
  305.         tmp.value = this.year;
  306.       }
  307.     }
  308.     Calendar.prototype.changeYear = function(incr){
  309.        (incr==1)?this.year++:this.year--;
  310.        this.writeString(this.buildString());
  311.     }
  312.     Calendar.prototype.changeMonth = function(incr){
  313.         if (this.month==11 && incr==1){
  314.           this.month = 0;
  315.             this.year++;
  316.         } else {
  317.           if (this.month==0 && incr==-1){
  318.             this.month = 11;
  319.             this.year--;
  320.           } else {
  321.             (incr==1)?this.month++:this.month--;
  322.           }
  323.         }
  324.         this.writeString(this.buildString());
  325.     }
  326.  
  327.     Calendar.prototype.clickDay = function(day){
  328.        var tmp = eval('document.' + this.target);
  329.        tmp.value = this.formatDateAsString(day,this.month,this.year);
  330.         if (browser.ns4) this.containerLayer.hidden=true;
  331.         if (browser.dom || browser.ie4){
  332.           this.containerLayer.style.visibility='hidden';
  333.         }
  334.     }
  335.     Calendar.prototype.formatDateAsString = function(day, month, year){
  336.       var delim = eval('/\\' + this.dateDelim + '/g');
  337.        switch (this.dateFormat.replace(delim,"")){
  338.          case 'ddmmmyyyy': return padZero(day) + this.dateDelim + this.months[month].substr(0,3) + this.dateDelim + year;
  339.          case 'ddmmyyyy': return padZero(day) + this.dateDelim + padZero(month+1) + this.dateDelim + year;
  340.          case 'mmddyyyy': return padZero((month+1)) + this.dateDelim + padZero(day) + this.dateDelim + year;
  341.          case 'yyyymmdd': return year + this.dateDelim + padZero(month+1) + this.dateDelim + padZero(day);
  342.          default: alert('unsupported date format');
  343.        }
  344.     }
  345.     Calendar.prototype.writeString = function(str){
  346.       if (browser.ns4){
  347.         this.containerLayer.document.open();
  348.         this.containerLayer.document.write(str);
  349.         this.containerLayer.document.close();
  350.       } 
  351.       if (browser.dom || browser.ie4){
  352.         this.containerLayer.innerHTML = str;
  353.       }
  354.     }
  355.  
  356.     Calendar.prototype.show = function(event, target, bHasDropDown, dateFormat, dateFrom, dateTo){
  357.     // calendar can restrict choices between 2 dates, if however no restrictions
  358.     // are made, let them choose any date between 1900 and 3000
  359.     this.dateFrom = dateFrom || new Date(1900,0,1);
  360.     this.dateFromDay = padZero(this.dateFrom.getDate());
  361.     this.dateFromMonth = padZero(this.dateFrom.getMonth());
  362.     this.dateFromYear = this.dateFrom.getFullYear();
  363.     this.dateTo = dateTo || new Date(3000,0,1);
  364.     this.dateToDay = padZero(this.dateTo.getDate());
  365.     this.dateToMonth = padZero(this.dateTo.getMonth());
  366.     this.dateToYear = this.dateTo.getFullYear();
  367.     this.hasDropDown = bHasDropDown;
  368.     this.dateFormat = dateFormat || 'dd-mmm-yyyy';
  369.     switch (this.dateFormat){
  370.       case 'dd-mmm-yyyy':
  371.       case 'dd-mm-yyyy':
  372.       case 'yyyy-mm-dd':
  373.         this.dateDelim = '-';
  374.         break;
  375.       case 'dd/mm/yyyy':
  376.       case 'mm/dd/yyyy':
  377.       case 'dd/mmm/yyyy':
  378.         this.dateDelim = '/';
  379.         break;
  380.     }
  381.  
  382.       if (browser.ns4) {
  383.         if (!this.containerLayer.hidden) {
  384.           this.containerLayer.hidden=true;
  385.           return;
  386.         }
  387.        }
  388.       if (browser.dom || browser.ie4){
  389.         if (this.containerLayer.style.visibility=='visible') {
  390.           this.containerLayer.style.visibility='hidden';
  391.           return;
  392.         }  
  393.       }
  394.  
  395.       if (browser.ie5 || browser.ie4){
  396.         var event = window.event;
  397.       }
  398.       if (browser.ns4){
  399.         this.containerLayer.x = event.x+10;
  400.         this.containerLayer.y = event.y-5;
  401.       }
  402.       if (browser.ie5 || browser.ie4){
  403.         var obj = event.srcElement;
  404.          x = 0;
  405.           while (obj.offsetParent != null) {
  406.               x += obj.offsetLeft;
  407.               obj = obj.offsetParent;
  408.           }
  409.           x += obj.offsetLeft;
  410.         y = 0;
  411.         var obj = event.srcElement;
  412.         while (obj.offsetParent != null) {
  413.               y += obj.offsetTop;
  414.               obj = obj.offsetParent;
  415.           }
  416.           y += obj.offsetTop;
  417.  
  418.         this.containerLayer.style.left = x+35;
  419.         if (event.y>0)this.containerLayer.style.top = y;
  420.       }
  421.       if (browser.ns6){
  422.         this.containerLayer.style.left = event.pageX+10;
  423.         this.containerLayer.style.top = event.pageY-5;
  424.       }
  425.       this.target = target;
  426.       var tmp = eval('document.' + this.target);
  427.       if (tmp && tmp.value && tmp.value.split(this.dateDelim).length==3 && tmp.value.indexOf('d')==-1){
  428.         var atmp = tmp.value.split(this.dateDelim)
  429.         switch (this.dateFormat){
  430.          case 'dd-mmm-yyyy':
  431.          case 'dd/mmm/yyyy':
  432.            for (var i=0;i<this.months.length;i++){
  433.              if (atmp[1].toLowerCase()==this.months[i].substr(0,3).toLowerCase()){
  434.                this.month = this.oMonth = i;
  435.                break;
  436.              }
  437.            }
  438.            this.day = parseInt(atmp[0],10);
  439.            this.year = this.oYear = parseInt(atmp[2],10);
  440.            break;
  441.          case 'dd/mm/yyyy':
  442.          case 'dd-mm-yyyy':
  443.            this.month = this.oMonth = parseInt(atmp[1]-1,10); 
  444.            this.day = parseInt(atmp[0],10);
  445.            this.year = this.oYear = parseInt(atmp[2],10);
  446.            break;
  447.          case 'mm/dd/yyyy':
  448.          case 'mm-dd-yyyy':
  449.            this.month = this.oMonth = parseInt(atmp[0]-1,10);
  450.            this.day = parseInt(atmp[1],10);
  451.            this.year = this.oYear = parseInt(atmp[2],10);
  452.            break;
  453.          case 'yyyy-mm-dd':
  454.            this.month = this.oMonth = parseInt(atmp[1]-1,10);
  455.            this.day = parseInt(atmp[2],10);
  456.            this.year = this.oYear = parseInt(atmp[0],10);
  457.            break;
  458.         }
  459.       } else { // no date set, default to today
  460.         var theDate = new Date();
  461.            this.year = this.oYear = theDate.getFullYear();
  462.          this.month = this.oMonth = theDate.getMonth();
  463.          this.day = this.oDay = theDate.getDate();
  464.       }
  465.       this.writeString(this.buildString());
  466.  
  467.       // and then show it!
  468.        if (browser.ns4) {
  469.        this.containerLayer.hidden=false;
  470.        }
  471.       if (browser.dom || browser.ie4){
  472.           this.containerLayer.style.visibility='visible';
  473.       }
  474.     }
  475.  
  476.     Calendar.prototype.hide = function(){
  477.       if (browser.ns4) this.containerLayer.hidden = true;
  478.       if (browser.dom || browser.ie4){
  479.         this.containerLayer.style.visibility='hidden';
  480.       }
  481.     }
  482.  
  483.     function handleDocumentClick(e){
  484.       if (browser.ie4 || browser.ie5) e = window.event;
  485.  
  486.       if (browser.ns6){
  487.         var bTest = (e.pageX > parseInt(g_Calendar.containerLayer.style.left,10) && e.pageX <  (parseInt(g_Calendar.containerLayer.style.left,10)+125) && e.pageY < (parseInt(g_Calendar.containerLayer.style.top,10)+125) && e.pageY > parseInt(g_Calendar.containerLayer.style.top,10));
  488.         if (e.target.name!='imgCalendar' && e.target.name!='month'  && e.target.name!='year' && e.target.name!='calendar' && !bTest){
  489.           g_Calendar.hide(); 
  490.         }
  491.       }
  492.       if (browser.ie4 || browser.ie5){
  493.         // extra test to see if user clicked inside the calendar but not on a valid date, we don't want it to disappear in this case
  494.        var bTest = (e.x > parseInt(g_Calendar.containerLayer.style.left,10) && e.x <  (parseInt(g_Calendar.containerLayer.style.left,10)+125) && e.y < (parseInt(g_Calendar.containerLayer.style.top,10)+125) && e.y > parseInt(g_Calendar.containerLayer.style.top,10));
  495.         if (e.srcElement.name!='imgCalendar' && e.srcElement.name!='month' && e.srcElement.name!='year' && !bTest & typeof(e.srcElement)!='object'){
  496.           g_Calendar.hide(); 
  497.         }
  498.       }
  499.       if (browser.ns4) g_Calendar.hide();
  500.     }
  501.  
  502.     // utility function
  503.     function padZero(num) {
  504.       return ((num <= 9) ? ("0" + num) : num);
  505.     }
  506.       // Finally licked extending  native date object;
  507.       Date.isLeapYear = function(year){ if (year%4==0 && ((year%100!=0) || (year%400==0))) return true; else return false; }
  508.       Date.daysInYear = function(year){ if (Date.isLeapYear(year)) return 366; else return 365;}
  509.       var DAY = 1000*60*60*24;
  510.       Date.prototype.addDays = function(num){
  511.         return new Date((num*DAY)+this.valueOf());
  512.       }    
  513.  
  514.      // events capturing, careful you don't override this by setting something in the onload event of 
  515.     // the body tag
  516.     window.onload=function(){ 
  517.       new Calendar(new Date());
  518.       if (browser.ns4){
  519.         if (typeof document.NSfix == 'undefined'){
  520.           document.NSfix = new Object();
  521.           document.NSfix.initWidth=window.innerWidth;
  522.           document.NSfix.initHeight=window.innerHeight;
  523.         }
  524.       }
  525.     }
  526.     if (browser.ns4) window.onresize = function(){
  527.       if (document.NSfix.initWidth!=window.innerWidth || document.NSfix.initHeight!=window.innerHeight) window.location.reload(false);
  528.     } // ns4 resize bug workaround
  529.     window.document.onclick=handleDocumentClick;
  530.     window.onerror = function(msg,url,line){
  531.       alert('******* an error has occurred ********' +
  532.       '\n\nPlease check that' + 
  533.       '\n\n1)You have not added any code to the body onload event,'
  534.       +  '\nif you want to run something as well as the calendar initialisation'
  535.       + '\ncode, add it to the onload event in the calendar library.'
  536.       + '\n\n2)You have set the parameters correctly in the g_Calendar.show() method '
  537.       + '\n\nSee www.totallysmartit.com\\examples\\calendar\\simple.asp for examples'
  538.       + '\n\n------------------------------------------------------'
  539.       + '\nError details'
  540.       + '\nText:' + msg + '\nurl:' + url + '\nline:' + line);
  541.     }
  542.  
  543.     </script>
  544.     <style>
  545. #container {
  546. position : absolute;
  547. left : 100px;
  548. top : 100px;
  549. width : 124px;
  550. height : 140px;
  551. clip:rect(0px 124px 140px 0px);
  552. visibility : hidden;
  553. background-color : #ffffff
  554. }
  555.  
  556. </style>
  557.     <style>
  558.     td{
  559.       font-family : Arial,Helvetica,Sans-serif;
  560.       font-size : 12px;
  561.       color : #000000;
  562.     }
  563.     input{
  564.       font-family : Arial,Helvetica,Sans-serif;
  565.       font-size : 12px;
  566.       color : #000000;
  567.       width : 90px;
  568.     }
  569.     </style>
  570.  
  571.  
  572.  
  573. <div id="container" onmouseover="if (timeoutId) clearTimeout(timeoutId);" onmouseout="calendarTimeout();" style="visibility: hidden;"/></div>
  574.  
  575.  
  576.  
  577.  
  578.  
  579.  
  580. <table>
  581.  
  582. <TR>
  583. <th>Expected Close Date</th>
  584. <td><input type="text" name="closedate" size="11">
  585.           <a href="javascript: void(0);" onmouseover="if (timeoutId) clearTimeout(timeoutId);window.status='Show Calendar';return true;" onmouseout="if (timeoutDelay) calendarTimeout();window.status='';" onclick="g_Calendar.show(event,'frm.closedate', false, 'dd/mm/yyyy', new Date()); return false;"><img src="calendar/images/calendar.gif" name="imgCalendar" width="34" height="21" border="0" alt=""></a>
  586.  
  587. </td>
  588. </tr>
  589.  
  590. </form>
  591. </table>
  592.  
  593. </body>
  594.  
  595. </html>
  596.  
  597.  
Here in this code the calendar function is working perfectly but the drop down list is not working based on the code.

kindly somebody rectify this error
The calendar code and the dropdown code are working seperately whwn merged the dropdown is not working

kindly somebody rectify this error

Thanks in advance
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#8: Mar 21 '09

re: while selecting a column in the listbox related colum to be populated in other listbo

You have two main problems:
1. your body tag is in the wrong place
2. see lines 530-40: move the fillteam() call to the window.onload function on line 515+.

Your addOption() function is slightly incorrect, but we can deal with that later.
Newbie
  
Join Date: Feb 2009
Posts: 27
#9: Mar 25 '09

re: while selecting a column in the listbox related colum to be populated in other listbo

thanks the got the solution for the problem
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#10: Mar 28 '09

re: while selecting a column in the listbox related colum to be populated in other listbo

Glad you got it working.
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,501 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved