Cascading Select Boxes - Jquery

Question

Having a problem with dynamically populated select boxes using jQuery.

Basically, my code calls a php script which populates the select box (utilityMainChart). Let's say it brings back two options for the the select box utilityMainChart, I want the next select box (parameterMainChart) to be populated with the options for whichever option is first in the utilityMainChart select box.

As it is right now, the select boxes get populate properly initially, but the line var building = $('#utilityMainChart').val(); never returns the value of the select box. This means that any change to a select box result in the ones below it becoming blank, since no value is picked up.

My code for the javascript is shown below:

var data = "1" + "_" + building + "_";
var url = "/charts/data/utilityManagerMenuPopulate.php?data=" + data;
$('#utilityMainChart').load(url);

var building = $('#utilityMainChart').val();
var data = "2" + "_" + building + "_" + utility;
var url = "/charts/data/utilityManagerMenuPopulate.php?data=" + data;
$('#parameterMainChart').load(url);

My php code returns data in the form:

<select id="utilityMainChart" name="utilityMainChart">
    <option selected value=1>Electricity</option>
    <option value=3>Water</option>
</select>

Any advice would be awesome. I've been playing around with this for hours and just can't get it to work

Answer 1

Try changing

var building = $('#utilityMainChart').val();

to

var building = $('#utilityMainChart :selected').val();

EDIT: Your #utilityMainChart is not a unique id it is on both the select and the selects containing div. So you when you run the above code it gets the div. If you try this will it help.

var building = $('select#utilityMainChart').val();