级联选择框- Jquery

Question

使用jQuery动态填充选择框时出现问题。

基本上，我的代码调用一个填充选择框(utilityMainChart)的php脚本。假设它返回了选择框utilityMainChart的两个选项，我希望使用utilityMainChart选择框中第一个选项的选项填充下一个选择框(parameterMainChart)。

现在，选择框最初得到正确填充，但是var building = $('#utilityMainChart').val()；这一行从不返回选择框的值。这意味着对选择框所做的任何更改都会导致其下面的框变为空白，因为没有选取任何值。

我的javascript代码如下：

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

我的php代码以下面的形式返回数据：

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

任何建议都是很棒的。我已经玩了几个小时了，就是不能让它工作

Answer 1

试着改变

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

至

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

EDIT:你的#utilityMainChart不是唯一的id，它同时存在于select和selects中。所以当你运行上面的代码时，它会得到div。如果你尝试这样做会有帮助吗？

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