Question

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

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

我有一个<select>列表，我使用外部JSON文件填充了这个列表 - 现在正在处理它！

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

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

我需要发生的是......当选择菜单中的选项（例如伦敦）时，它需要在我的页面内切换一个div ....从外部文件中拉入HTML然后在其中显示某些元素那个HTML文件要做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");
    });
    });
});

这就是我的所有代码，只是因为我遗失了任何错误或任何错误！

谢谢利亚姆

Answer 1

你应该改变你的选择元素：

<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文件夹位于您网站的根文件夹中。它应该工作正常。

Answer 2

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

$('#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"

希望这适合你。

使用AJAX＆amp; jQuery从外部文件中提取某些HTML元素

2 个答案: