Problem with dynamic Select boxes - Year, Month, Day

Dev Shed Forums Sponsor:

February 12th, 2013, 08:36 PM

LurkMoar

Registered User

Join Date: Feb 2013

Posts: 3

Time spent in forums: 35 m 46 sec
Reputation Power: 0

jQuery - Problem with dynamic Select boxes - Year, Month, Day

Basically what I want to happen is this...

The user must first select the year. Then the month select box will populate with the months. Once a month is chosen then the day select will be populated with either 28, 30 or 31 days. My problem is that when I try to get the value from the month select, it returns nothing. jQuery functions like .change(), .blur() don't work either. I've tried a lot of different ways to come up with a working solution but I'm now stuck.

To understand what I mean, copy the code below, save it as whatever.html. Open it and try to choose a month or a day. They are empty. So.. choose a year. It will alert you the value and make the months select available. Now when you choose a month, nothing happens.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Select</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">

var monthSelectEmpty = '<select id="month">';
monthSelectEmpty += '<option value="">Month</option>';
monthSelectEmpty += '</select>';

var monthSelect = '<select id="month">';
monthSelect += '<option value="">Month</option>';
monthSelect += '<option value="1">January</option>';
monthSelect += '<option value="2">February</option>';
monthSelect += '<option value="3">March</option>';
monthSelect += '<option value="4">April</option>';
monthSelect += '<option value="5">May</option>';
monthSelect += '<option value="6">June</option>';
monthSelect += '<option value="7">July</option>';
monthSelect += '<option value="8">August</option>';
monthSelect += '<option value="9">September</option>';
monthSelect += '<option value="10">October</option>';
monthSelect += '<option value="11">November</option>';
monthSelect += '<option value="12">December</option>';
monthSelect += '</select>';

</script>
<script type="text/javascript">

$(document).ready(function(){

	$('#year').change(function(){
	var year = $('#year').val();
	alert('You selected '+year);
	//*
		if(year == ""){
		$('#month-select').empty();
		$('#month-select').html(monthSelectEmpty);
		}
		else
		{
		$('#month-select').empty();
		$('#month-select').html(monthSelect);
		}
	//*/
	});
	
	$('#month').change(function(){
	var month = $('#month').val();
	alert('You select month number '+month);
	});


});

</script>
</head>
<body>

<select id="year">
<option value="">Year</option>
<script type="text/javascript">
var yearSelect = 2013;
var count = 1930;

while(yearSelect > count){
document.write('<option value="'+yearSelect+'">'+yearSelect+'</option>');
yearSelect--;
}
</script>
</select>

<span id="month-select">
<select id="month">
<option value="">Month</option>
</select>
</span>

<span id="day-select">
<select id="day">
<option value="">Day</option>
</select>
</span>

<br><br>

Step 1: Click the year box and choose a year. You will receive an alert.<br>
Step 2: Click the month box and choose a month. You should receive the alert again with the month value. But it doesn't work.

</body>
</html>

If you think you can help.. PLEASE DO NOT POST CODE OF A COMPLETE WORKING VERSION OF WHAT I WANT.

I do not learn from others doing my work. Just help me figure out what isn't right or where it's breaking. And yes, my coding probably sucks. Feel free to offer advice on different ways to code this, but in the end I want the same results.

February 12th, 2013, 10:59 PM

null.if.ied

Registered User

Join Date: Feb 2013

Posts: 26

Time spent in forums: 6 h 15 m
Reputation Power: 0

Quote:

Originally Posted by LurkMoar

My problem is that when I try to get the value from the month select, it returns nothing. jQuery functions like .change(), .blur() don't work either.

Have another look at when your jquery function is loading, taking into account what dynamically generated HTML content it would see at that phase of page load.

- Null

February 12th, 2013, 11:16 PM

LurkMoar

Registered User

Join Date: Feb 2013

Posts: 3

Time spent in forums: 35 m 46 sec
Reputation Power: 0

Quote:

Originally Posted by null.if.ied

Have another look at when your jquery function is loading, taking into account what dynamically generated HTML content it would see at that phase of page load.

- Null

When the page is loaded there is a blank select field for month. Once the year value has been changed the select field for month is updated to hold values. The new month field has the same id as the one loaded with the page. I'm confused where it goes wrong.

February 13th, 2013, 07:58 AM

LurkMoar

Registered User

Join Date: Feb 2013

Posts: 3

Time spent in forums: 35 m 46 sec
Reputation Power: 0

Well it seems that I have found a working answer. I load the page with the year select, a visible month select with no values and a hidden month select with values. When the year is changed I change the attribute of the select box from a hidden class to a visible one.

February 13th, 2013, 09:11 AM

null.if.ied

Registered User

Join Date: Feb 2013

Posts: 26

Time spent in forums: 6 h 15 m
Reputation Power: 0

That's certainly one option. Another would be to call the jquery function each time after you've created some new HTML.

The problem isn't that jquery can't see the selects, but rather that it can't see the values you're adding later on, since those come well after the $(document).ready state. Calling the function again after you've created new HTML will allow jquery to act on it.

This is why the hidden, populated, select that you have now works fine but the dynamically populated one does not.

- Null

Last edited by null.if.ied : February 13th, 2013 at 09:16 AM. Reason: clarified possible ambiguity

February 13th, 2013, 07:39 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,890

Time spent in forums: 6 Months 2 Days 18 h 8 m 45 sec
Reputation Power: 4192

To explain it another way, the ID is only used to get a reference to the element. You could attach the event handler and then change the ID of the element and the event handler would still be able to fire. So when you were changing the options you were replacing the whole <select> with a new one with the same ID, thus any event handlers attached to the first one were lost.

I'd suggest you do something like this:

Code:

var sel=$('#month'),
months=['Month',
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'];
jQuery.each(months,function(i,m){
  // the i||'' is so that the value of the first option is an empty string instead of "0"
  sel.append($('<option>').attr('value',(i||'')).text(m));
});

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

jQuery - Problem with dynamic Select boxes - Year, Month, Day

Developer Shed Advertisers and Affiliates