I am trying to implement a related selects. When the user chooses a client 2 other boxes get populated. When the document is ready I add a change event to the company select box. When the company is selected it fires off 2 methods each of which populate the other select boxes. A look into firebug shows that both queries are running and the json is being returned. The 1st drop down gets populated but the 2 one is acting very odd. Even if I were to rip the code out of the 2nd function and just stick in an alert() its not getting executed. I am wondering if I am colliding with something, any help is appreciated.
$(document).ready(function() { // add onChange event to company select box $("#company").change(onCompanyChange); }); function onCompanyChange(){ var clientId = $("#company option:selected").val(); populateKeywords(clientId); populateShows(clientId); } function populateKeywords(clientId){ jQuery.getJSON("com/abccompnay/keywords.cfc", {method:"getByClient",client_id:clientId}, function(j){ var options = ""; options += '<option value="" selected>All Keywords</option>'; for (var i = 0; i < j.length; i++) { options += '<option value="' + j[i].value + '">' + j[i].display + '</option>'; } $("select#keyword").html(options); document.getElementById("keyword").disabled = false; }); } function populateShows(clientId){ jQuery.getJSON("com/abccompany/orders.cfc", {method:"listShows",client_id:clientId}, function(x){ var options = ""; options += '<option value="" selected>All Shows</option>'; for (var y = 0; y < x.length; y++) { options += '<option value="' + x[y].value + '">' + x[y].display + '</option>'; } $("select#shows").html(options); document.getElementById("shows").disabled = false; }); }