0

这是我在这里的第一个问题，所以很好！

我有一个问题，我似乎无法理解......就在这里。

我有一个<select>使用外部 JSON 文件填充的列表 - 现在它正在工作！

我现在需要做的是根据选择菜单中的选择从外部 HTML 文件中提取某些 HTML 元素。

例如，如果您访问 - http://lddesigns.co.uk/Candidate/index.html，您会看到我有一个选择菜单和一些我正在玩的按钮，选择菜单中的选项已填充通过 JSON 使用 jQuery（将在下面发布代码）。

What I need to happen is...when an option in the menu is selected (eg London) it needs to toggle a div within my page....pull in HTML from an external file and then display certain elements within that HTML file要进行 5 天的天气预报，我似乎根本无法弄清楚这是如何完成的。

我有选择列表中 4 个位置中的 3 个的 raw_html 文件，当用户选择一个选项时，它应该拉入相关的 HTML - 例如对于纽约，我有 HTML 文件 nyc_weather.html。

我希望这是有道理的，我的 HTML 和 jQuery 代码在下面供您思考……我是一个完全的 jQuery、JSON、AJAX 初学者，这对我来说是全新的！

HTML：

<div id="weatherPod">

<h2>content</h2>

<select id="destinations" onchange="window.location=this.value;">
 <option value"">Select Destination</option>
</select>
<button id="button">Show</button>
<button id="button1">Div</button>

    <div id="weatherForecasts">

    <p>5 Day Forecast for [destinationID]</p>

    </div>  

</div>

jQuery：

$(document).ready(function(){

// The below function pulls in the data from the external JSON file

    $.getJSON('json/destinations.json', function (data) {

// attaches it to a variable
    var destinations = data.Destinations;

        $(destinations).each( function (id, destination) {
            $('select').append('<option value="raw_html/' + destination.destinationID +    
            '_weather.html">' + destination.destinationName + '</option>');
        }); 
    });

// Hide statements for our extra fields and also the weather forecast DIV
    $('#weatherForecasts').hide();
    $('#extraFields').hide();

    $("input[name='survey1']").change(function() {
        $("#extraFields").show("slow");
    });
    $("input[name='survey1']:checked").change(); //trigger correct state onload

    $("#button1").click(function(){
        $('#weatherForecasts').load('raw_html/lon_weather.html .destinationWidth', function(){
    $('#weatherForecasts').slideToggle("slow");
    });
    });
});

这就是我所有的代码，以防万一我遗漏了任何错误或任何错误！

谢谢利亚姆

4

2 回答 2

0

如果我理解这个问题，你需要这样的东西：

$('#destinations').change(function(){

  var selected = $(this).val();

  //perform AJAX request
  $.ajax({

     url:selected,
     type : 'GET'
     error: function(){},// handle error
     success: function(data){ 
         $('#weatherForecasts p').html(data); //put response data into html
     } //end of success function
  }); // end of ajax request

}); //end of change function

如果您想从数据中获取单个元素，那么正确的解决方案可能是初始化一个新的 jquery 对象。

var mydata = $(data); //initialize new jquery object
var myobject = $(data).find('#mytag'); // get a single element with id="mytag"

希望这对你有用。

于 2013-09-16T13:58:42.173 回答
0

你应该像这样改变你的选择元素：

<select id="destinations">
   <option value"">Select Destination</option>
   <option value"nyc">New York</option>
   <option value"lnd">London</option>
   ...//according to your html file names 'nyc_weather.html'
</select>

在你的 document.ready 函数中

     $('#destinations').change(function(){
         if($(this).val().length > 0){
            var url = '/raw_html/'+ $(this).val() + '_weather.html'; // I assume your destination select option values are like 'nyc, lnd,...'

            $.get(url, function(data) {
                $('#weatherForecasts p').html(data);
                $('#weatherForecasts').slideToggle("slow");
            }).fail(function(){
                alert("file doesn't exist!");
            });
         }
         else{
            $('#weatherForecasts p').html("");
         } 
     });

如果您的 raw/html 文件夹位于您网站的根文件夹中。它应该可以正常工作。

于 2013-09-16T13:52:52.627 回答