Jquery 我想在做出选择后将html文件中的元素加载到div中

我有以下HTML代码：

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

然而，这不起作用。我是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);
 });

 }); 

$.getJSON（'json/destinations.json'，函数（数据）{
目的地=数据['destinations']
$。每个（数据、目的地、功能（i、v）{
$（“#目的地”）.append（“”+v.destinationName+“”）；
var URL=“/raw\u html/”+v.destinationID+“\u weather.html”
console.log（URL）；
$（“#位置”）.load（URL）；
})
$（“#目的地”）.change（函数（）{
$（“#位置”）.load（URL）；
});
}); 

---

并将正确的URL添加到控制台日志中。如何将其添加到onChange事件中？感谢您的帮助首先，您是否使用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");
});

//循环附加目标，但从'each'循环中删除其余目标。
$。每个（数据、目的地、功能（i、v）{
$（“#目的地”）.append（“”+v.destinationName+“”）；
});
//为#目的地添加更改处理程序
$（“#目的地”）.change（函数（）{
//当#目的地更改时，使用已选择的选项值创建URL
var URL=“/raw_html/”+$（this.val（）+“_weather.html”；
console.log（URL）；//仅用于检查
$（“#位置”）.load（URL）；
//如果它工作正常，你可以在一行中完成
//$（“#location”）.load（“/raw_html/”+$（this.val（）+”_weather.html”）；
});

不确定您使用的是什么浏览器，但如果您正在本地工作并尝试进行测试，并且您使用的是Chrome，它将不会加载本地文件。看到这篇文章：你的URL应该有空格吗？@kunalbhat我在Firefox中工作，但谢谢你的建议。@Jack Cole，不，URL不应该有空格，谢谢你发现了这一点。如果你在Firefox中工作，CTRL+SHIFT+K打开web控制台。谢谢。我应该在哪里使用console.log，它是在我使用的jQuery之前还是替代它？另外，我已经检查了使用Firebug，并且正确地附加了选项。@Ste首先，请尝试我的答案中的示例，看看它是否出现，以及URL的值是什么（或者如果不喜欢URL，请调用变量）。它将正确的URL添加到控制台日志中。如何将其添加到onChange事件中？change函数可以工作，但当我尝试.load函数时，它没有填充div位置，再次感谢您的帮助：）

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

// 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");
});