我想從一個HTML文件中的元素加載到一個div選擇已經取得了

Question

後，我有這樣的HTML代碼：

$.getJSON('json/destinations.json', function(data) { 
    destinations = data['Destinations'] 
    $.each(data.Destinations, function(i, v) { 
     $('#destinations').append('<option value="' + v.destinationID + '">' + v.destinationName + '</option>'); 
    }) 
}); 

：

<form action="" name="weatherpod" id="weatherpod" method="post"> 
<label for="destinations">Destination</label><br /> 
<select id="destinations" onChange=""> 
<option value="empty">Select Location</option> 
</select> 
<div id="location"> 
</div> 
</form> 

的選項是通過一個JSON文件中創建一旦用戶做出選擇，我想將HTML文件中的元素拖入div#location。

這是我已經試過：

$("#destinations").change(function() { 
    $("#location").load("/raw_html/" + $(this).val() + "_weather.html #body table"); 
}); 

但是，這是行不通的。我是jQuery的新手，所以任何幫助將不勝感激。

感謝

我曾嘗試：

$.getJSON('json/destinations.json', function(data) { 
    destinations = data['Destinations'] 

    $.each(data.Destinations, function(i, v) { 
    $('#destinations').append('<option value="' + v.destinationID + '">' + v.destinationName + '</option>'); 
     var URL = "/raw_html/" + v.destinationID + "_weather.html" 
     console.log(URL); 
     $("#location").load(URL); 
    }) 
    $("#destinations").change(function() { 
    $("#location").load(URL); 
}); 

}); 

，並添加正確的URL到控制檯日誌。我如何將它添加到onChange事件？感謝您的幫助

Answer 1

首先，你有沒有使用Firebug來檢查選項是否正確？

其次，您可以使用console.log來檢查更改是否正在觸發以及是否正確創建了文件名。它可能在這個階段更清楚使用方法：

var URL = "/raw... 
console.log(URL); 
$("#location").load(URL); 

如果您使用Chrome，它不會工作（見第一註釋）。

---

更新：

// Loop through appending destinations, but remove the rest from the `each` loop. 
$.each(data.Destinations, function(i, v) { 
    $('#destinations').append('<option value="' + v.destinationID + '">' + v.destinationName + '</option>'); 
}); 

// Add a change handler for #destinations 
$("#destinations").change(function() { 
    // When #destinations changes, create the URL using the option value that has been selected 
    var URL = "/raw_html/" + $(this).val() + "_weather.html"; 
    console.log(URL); // Just to check 
    $("#location").load(URL); 

    // If it's working fine, you can just do this in one line 
    // $("#location").load("/raw_html/" + $(this).val() + "_weather.html"); 
});