级联选择框 - Jquery

Question

使用 jQuery 动态填充选择框时遇到问题。

基本上，我的代码调用一个填充选择框 (utilityMainChart) 的 php 脚本。假设它为选择框实用程序MainChart 带回了两个选项，我希望下一个选择框（parameterMainChart）填充实用程序MainChart 选择框中第一个选项的选项。

就像现在一样，选择框最初会正确填充，但行 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();

编辑：您的 #utilityMainChart 不是唯一的 id，它在 select 和包含 div 的 select 上都存在。所以当你运行上面的代码时，它会得到 div。如果您尝试这样做会有所帮助。

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