級聯選擇框-jQuery

Question

使用jQuery動態填充選擇框時遇到問題。

基本上，我的代碼調用了一個php腳本，該腳本填充了選擇框（utilityMainChart）。 假設它為選擇框實用程序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的#utilityMainChart上。 因此，當您運行上述代碼時，它將獲得div。 如果您嘗試這樣做會有所幫助。

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