#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    3
    Rep Power
    0

    Post 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.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    26
    Rep Power
    0
    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
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    3
    Rep Power
    0
    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.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    3
    Rep 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.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    26
    Rep 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
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    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.

    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).

IMN logo majestic logo threadwatch logo seochat tools logo