cascading ajax select menu Jquery

Hi I am trying to figure out how to get the third menu working on a set of cascading select menus. The first menu is pulled when the page is loaded and then I use the $.post method to get the contents of the second menu based on the first selection. The problem is when it is loaded via ajax obviously the data isn't there the for the 3rd menu to get the value from the second menu. My understanding is that I need to use the jquery delegate method. I have played around with but do not understand how to use it properly.I am new to jquery and javascript and would appreciate some help it took me forever to get the second menu working correctly.
Here is the code I am using.

<script>
              function displayValue()
                {
                    var InputValue= $("#ReferralSource").val();
                    $.post('my/url/to/process',{'ReferralSource':InputValue},function(data){
                       $('#ReferralSub').html(data);
				
                });
                }
                $("select").change(displayValue);
                displayValue();
				
            </script>

Code (markup):

Basically I was using the same code for the third menu. I tried attaching the $.delegate function in there but couldn't figure out how to work it. All the examples I seen for using the delegate function where for a totally different application and didnt make sense to me.
I tried the ajaxsuccess function but that didn't work either it only works when you change the first box. Any help would be appreciated I am ready to give up on this thing.

 

Also I realized if I select the 2nd menu option and then change it it will not be updated if I try to submit the form.
I am also usind jquery 1.7+ so I was reading that I should now use the $.on method in replacement of $.delegate

 

Ok so I really am lost now. I change the first JS code to

function displayValue()
                {
                    var customerValue= $("#ReferralSource").val();
					var dataString = 'ReferralSource='+ customerValue;
					$.ajax
					({
						type: "POST",
						url: "my/url/",
						async: false,
						data: dataString,
						dataType: "html",
						cache: false,
						success: function(html)
						{
						$("#ReferralSub").html(html);						
						$("select").change(displayValue);
						 				
						}
					});
                          }
                $("select").change(displayValue);
                displayValue();

Code (markup):

I then created a separate external script which I was primarily using to see the results it yield.

	
function test (DivID)
{
	$(DivID +" :input").change(function()
       {
	var postData= $(DivID +" :input").serialize()
	console.log(postData); 
       });
	
}

Code (markup):

This successfully gets the value from the target input #referralSub. However when I try and get the value to post back for the next select menu I can't get it. Please any help would be great this thing is driving me crazy

 

Alright sorry for blowing up this thread like this. I solved the problem. The first problem appears to be that I needed to use $.ajax instead of $.post so that I could set the async: false . The scond problem that was driving me insane was a simple noob mistake. The input I was trying to get was inside a div with the same id. So all I had to do was eitherchange the name of the <div> or add the :input selector to it.

 

A simple java script implementation of the cascading select menu, can be find from below:
http://www.scriptsplash.com/2012/07/chained-dropdown-in-javascript.html