0

これは私の最初の質問ですので、よろしくお願いします！

私には頭が回らないような問題があります......ここにあります。

<select>外部の JSON ファイルを使用して入力したリストがあります。

ここで行う必要があるのは、選択メニュー内で行われた選択に基づいて、外部 HTML ファイルから特定の HTML 要素を取得することです。

たとえば、http://lddesigns.co.uk/Candidate/index.htmlにアクセスすると、選択メニューといくつかのボタンがあり、選択メニューのオプションが入力されていることがわかります。 jQueryを使用したJSONによる（以下にコードを投稿します）。

私がする必要があるのは...メニューのオプションが選択されたとき(ロンドンなど)、ページ内の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");
    });
    });
});

これが私のコードのすべてです。見落としているエラーや何かがある場合に備えて!

ありがとうリアム

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 に答える