Solve Javascript Problem: 2 Dropdowns Menus

  • Java
  • Thread starter nazia_f
  • Start date
  • Tags
    Javascript
In summary, the conversation is about a person seeking help with a program they are writing in JavaScript. The program involves creating two drop-down menus, one for selecting a month and another for selecting a day. The person is having trouble with their code and is asking for assistance. The expert provides some tips and suggestions on how to fix the errors in the code and improve its functionality. They also recommend using online resources for learning more about web programming. Ultimately, the conversation centers around troubleshooting and improving the person's basic understanding of JavaScript.
  • #1
nazia_f
20
0
Hello!
I am a newbie in javascript programming. I am trying to write a program where there will be 2 drop-down menu, one for month and another for days. There will be no content in the day 'select' tag at first but when a month will be selected from the month drop-down box, day drop-down will show the exact number of days for that month i.e., January = 31, February = 28, April = 30 etc.

This the code I wrote but I can't figure out where I am making the mistake. Please help me improve my basic in JavaScript. I'll appreciate all your help. Thank you.

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">

function writeMonthOptions(){
var monthsName=new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
var monthCounter;

for(monthCounter=0; monthCounter<monthsName.length; monthCounter++)
document.write('<OPTION value=' + (monthCounter+1) + '>' + monthsName[monthCounter]);
}

function writeDayOptions(){
var mC=monthChosen.options[monthChosen.selectedIndex].value;
var dayCounter;
var daysNum = new Array;

if(mC==2){
for(dayCounter=1; dayCounter<=29; dayCounter++){
daysNum[dayCounter-1]=dayCounter;
}
}
else if(mC==4 || mC==6 || mC==9 || mC==11){
for(dayCounter=1; dayCounter<=30; dayCounter++){
daysNum[dayCounter-1]=dayCounter;
}
}
else{
for(dayCounter=1; dayCounter<=31; dayCounter++){
daysNum[dayCounter-1]=dayCounter;
}
}
writeDay(daysNum);

}

funtion writeDay(days){
var i=0;
while(days){
document.write('<OPTION value=' + days + '>' + days);
}
}
</script>

<select id="monthChosen" onChange="writeDayOptions()">
<option>Month</option>
<script language=JavaScript>
writeMonthOptions();
</script>
</select>

<select id="dayChosen">
<option>Day</option>
<script language=JavaScript>
writeDay();
</script>
</select>
</body>
</html>
 
Last edited:
Technology news on Phys.org
  • #2
When you include code in a post, put a [ code ] tag at the top and a [ /code ] tag at the bottom (without the spaces). I have done this, below.
nazia_f said:
Hello!
I am a newbie in javascript programming. I am trying to write a program where there will be 2 drop-down menu, one for month and another for days. There will be no content in the day 'select' tag at first but when a month will be selected from the month drop-down box, day drop-down will show the exact number of days for that month i.e., January = 31, February = 28, April = 30 etc.

This the code I wrote but I can't figure out where I am making the mistake. Please help me improve my basic in JavaScript. I'll appreciate all your help. Thank you.
Code: 
<!DOCTYPE html> 
<html>
<body>

<script  type="text/javascript">

function writeMonthOptions(){
	var monthsName=new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
	var monthCounter;
	
	for(monthCounter=0; monthCounter<monthsName.length; monthCounter++)
		document.write('<OPTION value=' + (monthCounter+1) + '>' + monthsName[monthCounter]);
}

function writeDayOptions(){
var mC=monthChosen.options[monthChosen.selectedIndex].value;
var dayCounter;
var daysNum = new Array;

	if(mC==2){
		for(dayCounter=1; dayCounter<=29; dayCounter++){
			daysNum[dayCounter-1]=dayCounter;
		}
	}
	else if(mC==4 || mC==6 || mC==9 || mC==11){
		for(dayCounter=1; dayCounter<=30; dayCounter++){
			daysNum[dayCounter-1]=dayCounter;
		}
	}
	else{
		for(dayCounter=1; dayCounter<=31; dayCounter++){
			daysNum[dayCounter-1]=dayCounter;
		}
	}
writeDay(daysNum);

}

funtion writeDay(days){
var i=0;
	while(days){
	document.write('<OPTION value=' + days[i] + '>' + days[i]);
	}
}
			


</script>

<select id="monthChosen" onChange="writeDayOptions()">
<option>Month</option>
<script language=JavaScript>
writeMonthOptions();
</script>
</select>

<select id="dayChosen">
<option>Day</option>
<script language=JavaScript>
writeDay();
</script>
</select>



</body>
</html>

You have several problems that I see.
1) "funtion" is incorrect in your definiton of the writeDay function.
2) In the script block at the end of your code, you call writeDay with no arguments. As you defined writeDay, it takes a parameter, presumably an array of numbers.
3) Your implementation of writeDay has an infinite loop.
Code: 
while(days){
   document.write('<OPTION value=' + days[i] + '>' + days[i]);
}
This loop runs forever, and continually prints the same string over and over, forever.

You need some way for the loop to stop - I would suggest a for loop that you control by the size of the array, days.
 
  • #3
Also, your loop in writeDay isn't writing the values in the array in the right place. You want to put them in your dayChosen select element, but they are instead just being written on the page and are overwriting your two select elements.
 
  • #4
Thanks a lot, Mark44. I tried to fix the problems you pointed out. I have tried to use GLOBAL variable this time and made 'daysNum' variable a GLOBAL one. But there's no result. I applied the similar sort of code for the 'month drop-down', then why isn't it working for 'day drop-down'? Is there any way to transfer javascript content to a specific place of html code?
Thank you very much for your help once again.

Code: 
<!DOCTYPE html> 
<html>
<body>

<script  type="text/javascript">

var daysNum=new Array;

if(a==23 && b==1)
	document.write("My birthday");

function writeMonthOptions(){
	var monthsName=new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
	var monthCounter;
	
	for(monthCounter=0; monthCounter<monthsName.length; monthCounter++)
		document.write('<OPTION value=' + (monthCounter+1) + '>' + monthsName[monthCounter]);
}

function writeDayOptions(){
var mC=monthChosen.options[monthChosen.selectedIndex].value;
var dayCounter;

	if(mC==2){
		for(dayCounter=1; dayCounter<=29; dayCounter++){
			daysNum[dayCounter-1]=dayCounter;
		}
	}
	else if(mC==4 || mC==6 || mC==9 || mC==11){
		for(dayCounter=1; dayCounter<=30; dayCounter++){
			daysNum[dayCounter-1]=dayCounter;
		}
	}
	else{
		for(dayCounter=1; dayCounter<=31; dayCounter++){
			daysNum[dayCounter-1]=dayCounter;
		}
	}

}

function writeDay(){
var i;
	for(i=0; i<daysNum.length; i++){
	document.write('<OPTION value=' + daysNum[i] + '>' + daysNum[i]);
	}
}
			</script>

<select id="monthChosen" onChange="writeDayOptions()">
<option>Month</option>
<script language=JavaScript>
writeMonthOptions();
</script>
</select>

<select id="dayChosen">
<option>Day</option>
<script language=JavaScript>
writeDay();
</script>
</select>
</body>
</html>
 
Last edited:
  • #5
I played around with your code, and was able to get something that works.

This code will correctly write option nodes into the select list. If you run it more than once, it continues to add dates into the select list, so you should add logic so that on the second and subsequent runs, any day number options get removed before new options are added. That's what the boolean variable firstRun is intended for.

I deleted your writeDay function, and merged its actions into writeDayOptions.

While I was putting this together I was using the debugging tools that are present in most browsers (press F12 in the browser to open the tools up). The debugger will automatically stop at any line that starts with debugger;

w3schools has a lot of tutorials on web programming. I found this page that deals with adding options to a select object in HTML - http://www.w3schools.com/jsref/met_select_add.asp

I'm sure there's another page on how to delete options.

Code: 
<!DOCTYPE html> 
<html>
<body>

<script  type="text/javascript">

var daysNum=new Array();
var firstRun = false;  // Not currently usedfunction writeMonthOptions(){
	var monthsName=new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", 

"Dec");
	var monthCounter;
	
	for(monthCounter=0; monthCounter<monthsName.length; monthCounter++)
		document.write('<OPTION value=' + (monthCounter+1) + '>' + monthsName[monthCounter]);
}

function writeDayOptions(){

  var mC=monthChosen.options[monthChosen.selectedIndex].value;
  var dayCounter;
  var i;
debugger;

  if(mC==2){
    for(dayCounter=1; dayCounter<=29; dayCounter++){
      daysNum[dayCounter-1]=dayCounter;
    }
  }
  else if(mC==4 || mC==6 || mC==9 || mC==11){
    for(dayCounter=1; dayCounter<=30; dayCounter++){
      daysNum[dayCounter-1]=dayCounter;
    }
  }
  else{
    for(dayCounter=1; dayCounter<=31; dayCounter++){
      daysNum[dayCounter-1]=dayCounter;
    }
  }
  //writeDay();
  var x = document.getElementById("dayChosen");
  for(i=1; i<= daysNum.length; i++){
     var option = document.createElement("option");
     option.text = i
     x.add(option, null);
  }
}

</script>

<select id="monthChosen" onChange="writeDayOptions()">
<option>Month</option>
<script language=JavaScript>
writeMonthOptions();
</script>
</select>

<select id="dayChosen">
<option>Day</option>
</select>

</body>
</html>
 
  • #6
Finally got it in correct shape. :biggrin:
Thank you so much, Mark44 ! I can't tell you how much I appreciate your help. Thanks a lot!
here's the code -

Code: 
<!DOCTYPE html> 
<html>
<body>

<script  type="text/javascript">

function writeMonthOptions(){
	var monthsName=new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
	var monthCounter;
	
	for(monthCounter=0; monthCounter<monthsName.length; monthCounter++)
		document.write('<OPTION value=' + (monthCounter+1) + '>' + monthsName[monthCounter]);
}

function writeDayOptions(){
var mC=monthChosen.options[monthChosen.selectedIndex].value;
var dayCounter;

	if(mC==2){
		daysNum = 29;
	}
	else if(mC==4 || mC==6 || mC==9 || mC==11){
		daysNum = 30;
	}
	else{
		daysNum = 31;
	}

var i;
var j;
var k;
var x=document.getElementById("dayChosen");

	if (x.options.length==1){
		for(i=1; i<=daysNum; i++){
			var opts=document.createElement("option");
			opts.value=i;
			opts.text=i;
			x.add(opts,null);
		}
	}
	
	else{
		for(j=1; j<x.options.length; ){
			x.remove(j);
		}
		
		for(k=1; k<=daysNum; k++){
			var opts=document.createElement("option");
			opts.value=k;
			opts.text=k;
			x.add(opts,null);
		}
	}	
			
}

</script>

<select id="monthChosen" onChange="writeDayOptions()">
<option>Month</option>
<script language=JavaScript>
writeMonthOptions();
</script>
</select>

<select id="dayChosen">
<option>Day</option>
</select></body>
</html>

and guess what? There was a code for this purpose in w3school and I found it just now. :D But I am really glad that I got to learn a lot. I am kind of thanking my luck for not finding the code earlier. :D
 
  • #7
nazia_f said:
Finally got it in correct shape. :biggrin:
Thank you so much, Mark44 ! I can't tell you how much I appreciate your help. Thanks a lot!

and guess what? There was a code for this purpose in w3school and I found it just now. :D But I am really glad that I got to learn a lot. I am kind of thanking my luck for not finding the code earlier. :D
Yes, I'm sure you learned more by writing the code than by copying code you found.
 

What is a "2 dropdown menus" problem in Javascript?

A "2 dropdown menus" problem in Javascript refers to a programming challenge that involves creating two dropdown menus that are dependent on each other. This means that the options in the second dropdown menu change based on the selection made in the first dropdown menu.

Why is solving this problem important in Javascript?

Solving this problem is important in Javascript because it allows for a more dynamic and user-friendly experience in web development. By creating dropdown menus that are dependent on each other, users can easily filter and select specific options without having to manually input data.

What is the most common approach to solving this problem?

The most common approach to solving this problem is by using event listeners. This involves assigning a function to the first dropdown menu that listens for changes in its selection. Once a change is detected, the function updates the options in the second dropdown menu accordingly.

What are some potential challenges when solving this problem?

One potential challenge when solving this problem is properly handling and organizing the data for the dropdown menus. Another challenge is ensuring that the options in the second dropdown menu are correctly updated and aligned with the selection in the first dropdown menu.

Are there any useful resources or tools for solving this problem?

Yes, there are many useful resources and tools available for solving this problem. Online tutorials, forums, and documentation can provide guidance and support. Additionally, JavaScript libraries such as jQuery and frameworks like React have built-in functions and methods for creating dynamic dropdown menus.

Hot Threads

Recent Insights

Back
Top