Cascading Select Boxes - jquery

Question

使用jQuery動態填充選擇框時出現問題。

基本上，我的代碼調用一個php腳本填充選擇框（utilityMainChart）。假設它爲選擇框utilityMainChart帶回了兩個選項，我希望下一個選擇框（parameterMainChart）可以填充選項，用於utilityMainChart選擇框中的第一個選項。

現在，選擇框在開始時會正確填充，但行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不是唯一它是在選擇和包含div的選擇。所以當你運行上面的代碼時，它會得到div。如果你嘗試這個，它會有幫助。

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