Dropdown Value Not Triggering Script

[poddys]

I have a program with 3 select statements, each of which will be populated based on the selected value of the previous one.  but for some reason it's not working, and I am tearing my hair out trying to figure out what I am doing wrong.

 

The values of the selects are blank when the page loads, I have a script that detects the page has loaded, and this calls a task that populates the first dropdown.  This works fine.

 

I have a script that follows this which detects a change in the selected value of the first dropdown and is supposed to call a task to populate the second dropdown.  This does not trigger at all.  The only way I can get it to trigger is if I comment out the first script (initial load).

 

I'm sure it's something simple, but for my simple mind (when it comes to JS at least) it's proving an impossible task, and I'm all Googled out.

 

The input form code is as follows:

               <form method="POST" id="Form1" name="Form1" action="TIMINGTOOL.pgm?task=dspitems">
                  
                  <span id="first-choice-code">
                  <select id='first-choice'>
                  <option value='null'>Select A Manufacturer</option>
                   </select>
                  </span>
                  
                  <br>
                  
                  <span id="second-choice-code">
                  <select id='second-choice'>
                  <option value='null'></option>
                  </select>
                  </span>
                  
                  <br>
                  
                  <span id="third-choice-code">
                  <select id='third-choice'>
                  <option value='null'></option>
                  </select>
                  </span>
                  
                  <br>
                  
                  <div id="FirstError" style="color:red"></div>                           
                  <div id="SecondError" style="color:red"></div>                           
                  <div id="ThirdError" style="color:red"></div>                           
                  
                  <input type="image" src="images/GO_Up.gif" name="Go1" border="0" 
                  align="absbottom" id="Go1" />    	
                  
                </form> 

The scripts (which are just above the page footer) are as follows:

<script>
 // Populate First Select On Page Load                
	$(window).load(function(){
    $.get("TIMINGTOOL.pgm?task=first" , function(data) {
	$("#first-choice-code").html(data);
});
	alert("select loaded");
});

</script>

//script>
 // Populate Second Select On First Change  
//$("#first-choice").change(function() {
//    $.get("TIMINGTOOL.pgm?task=second&choice="+$("#first-choice").val() , function(data) {
//	$("#second-choice-code").html(data);
//});
//});
///script> 

 <script>
 // Populate Second Select On First Change  
$("#first-choice").change(function(){
	alert("The new value is: " + $(this).val());
});
</script>  

The "real" second script has been commented out in the above code, and replaced by one that detects a change in the dropdown and displays an alert.  The first script is also set to display an alert so I can tell which is triggered.

 

Any thoughts please.  I know it could probably be coded better, but I am trying to keep it simpler based on my limited knowledge of Javascript and my even more limited knowledge of Jquery.

 

Thanks in advance.

[poddys]

I was hoping for some guidance on this over the weekend, as I am still in the dark over what I am doing wrong.  I guess people are too busy enjoying the nice weather, or also in the dark.

[fastsol]

It's a little confusing as to waht you are populating for each select box.  The HTML you show already has the select box in it but your jquery indicates that you are dumping the code within the spans and loading the select box again with the options rather than simply polulating the options themselves.  The issue might be that because you are populating the entire select box the DOM might not being seing the field with the methods you are using.  I know you can certainly do it this way but I think you need to use different jquery methods like on() rather than change().  The jquery.com forum would be a better choice to ask these questions though. 

 

I have done this same thing a few times and it's pretty straight forward really, but I only polulate the <options>.  If you have total control over all aspects I would suggest changing it so that only the options are populated and not the whole select box.  I have been thinking of doing a tutorial on this subject, so maybe it's time.  If I get it done I will repost here with a link.

[fastsol]

Ok I got that tutorial put together.

http://amecms.com/article/Building-Chained-Select-Boxes-with-Jquery-and-PHP

[.josh]

 

 

$.get("TIMINGTOOL.pgm?task=second&choice="+$("#first-choice").val() , function(data) {
  console.log(data);
  $("#second-choice-code").html(data);
});

does the js console show expected results?