使用jQuery / Ajax從下拉列表中進行選擇，從同一頁面上的另一個div加載內容

Question

我知道這是一個非常常見的問題，已經有多種解決方案，但是我無法找到我所遇到問題的合適解決方案

我有一個下拉列表，當用戶選擇下拉列表時，選擇將從其中加載在同一頁面中定義的div。 它工作正常，我將其實現如下：

<select id="selectMe">
    <option value="val1">opt1</option>
    <option value="val2">opt2</option>
    </select>

<div id="val1" class="group"> content1</div>
<div id="val2" class="group">content2</div>

jQuery ::

$(document).ready(function() {
  $('.group').hide();
  $('#val1').show();
  $('#selectMe').change(function() {
    $('.group').hide();
    $('#' + $(this).val()).show();
  })
});

現在，這符合我的目的，但是加載div時需要花費很多時間，因為它們中包含大量數據（iframe，外部調用），而在顯示div之前，頁面要花費大量時間（幾乎半分鍾）來加載所有div。我首先嘗試使用預定義的div，因為我了解我們可以在選擇時動態加載其他div，而不是在頁面加載時一次全部加載它們，因此我嘗試使用windows.load函數刪除documet.ready（），但這沒用。 如果我缺少任何東西，請有人幫我解決問題。

更新1：

該代碼工作正常，我沒有任何問題。 我想一次只加載選定的div，而不是同時加載所有div（約500個）和頁面，因為由於海量數據（div約為-包含iframe的數量約為500個），這會花費大量時間。
相反，我想僅在選擇時動態地分別加載每個div或將加載限制為僅較少數量

更新2：

div包含以下數據：

<div id="val1" class="group">
 <iframe class="DZembed-table" src="//www.datazoa.com/data/table.asp?a=view&th=1A7400B7A3&dzuuid=423&uid=dzadmin" frameborder="0" width="800px" height="270px">Unavailable - Anderson County, Ks - Total Employment (not seasonally adjusted)</iframe>

/ *大約10-15行的文字* /

</div>

我大約有500個這樣的div

供參考，請以此頁面為例，加載我要更改的頁面幾乎需要花費相同的時間

網址： http ： //kansaseconomy.org/economic-indicators/total-nonfarm-employment-bls

Answer 1

首先嘗試用CSS display: none;隱藏.group display: none; 而不是首先使用jQuery .hide()查看它是否足以滿足您的需求。

Answer 2

好吧，我想我明白了。 目前尚不清楚所有div中是否已包含所有數據，並且在初始頁面加載時渲染所有這些僅需要很長時間。 您必須從主HTML中刪除div的內容，並將它們放在javascript數據區域或其他文檔中，以延遲每個div中HTML的呈現。

由於每個似乎都只是將數據加載到iframe中，因此您應該加載空的div，並在每個URL中都具有類似“ fsrc”的屬性，並在選擇更改事件處理程序上將源從“ fsrc”動態加載到div中。 您還可以檢查div是否已經加載，以避免重復調用ajax請求。 如果您確實需要iframe，則可以在div中留空這些iframe，並使用相同的方法，但以iframe的HTML而不是div為目標。

這是一些入門代碼，但我懷疑您可能會遇到跨源問題，除非您已解決該問題。 HTML：

<select id="selectMe">
    <option value="val1">opt1</option>
    <option value="val2">opt2</option>
    </select>

<div id="val1" class="group" fsrc="" > content1</div>
<div id="val2" class="group" fsrc="//www.datazoa.com/data/table.asp?a=view&th=1A7400B7A3&dzuuid=423&uid=dzadmin">content2</div>

Javascript：

$(document).ready(function() {
  $('.group').hide();
  $('#val1').show();
  $('#selectMe').change(function() {
    $('.group').hide();
    $.ajax({
      url: $('#' + $(this).val()).attr('fsrc') ,
      context: document.body
    }).done(function() {
        $('#' + $(this).val()).html(data);
        $('#' + $(this).val()).show();
    });   
  })
});

也沒有錯誤檢查，所以我留給您解決。

Answer 3

要使用Ajax加載div內容，您需要做的第一件事是將div內容拆分為單獨的文件（或端點響應）

例如，我們可以創建一個文件名val1.html：

<p>div 1 content...</p>

然后創建另一個名為val2.html的文件：

<p>div 2 content...</p>

現在您需要做的就是更新您的jQuery，以通過Ajax將div內容更改為以下形式：

jQuery(document).ready(function($){
$('.group').hide();
$('#val1').show();
$('#selectMe').change(function() {
$('.group').hide();
var $ele = $('#' + $(this).val());
if( ! $ele.hasClass('ajax-loaded') ) {
    $.ajax({
        method: 'GET',
        url: 'http://example.com/' + $(this).val() + '.html'
    }).success(function(data){
        $ele.html(data);
        $ele.addClass('ajax-loaded');
        $ele.show();
    });
}
else {
    $ele.show();
}
})
});

Answer 4

您有多個不使用<iframe>的選項。 我不會太在意您的500個文本塊的覆蓋范圍，因為它們並不是很大。

選項A-JS商店

使用此選項，標記方面的工作量大大減少。 您不必手動或在服務器上創建100個內容DIV。 您只需重復使用相同的DIV。

 function createOption( value, text ) { var opt = document.createElement( 'option' ); opt.value = value; opt.text = text; return opt; } function buildSelect( options ) { var i = 0; var len = options.length; var frag = document.createDocumentFragment(); for ( ; i < len; i++ ) { frag.appendChild( createOption( i, 'Option ' + ( i + 1 ) ) ); } $list.append( frag ); } var data = [ "Quarter log Blimey hang the jib Davy Jones' Locker tackle boatswain squiffy. Shrouds American Main scallywag wench Blimey furl ye fathom. Holystone keel Pieces of Eight topsail come about Gold Road blow the man down fore. Overhaul mizzen gunwalls black jack long clothes weigh anchor fluke code of conduct. Take a caulk black spot brig fire ship gun long clothes jury mast tender. Ye yardarm to go on account jury mast grog blossom Plate Fleet broadside grog. Scuttle chandler belaying pin pirate gaff hulk pressgang Spanish Main. Topmast chantey crimp yardarm flogging jib line avast. Warp Chain Shot shrouds rum flogging fire ship grapple log. Take a caulk rope's end Plate Fleet log haul wind Blimey keelhaul overhaul.", "Port parrel cog chase Brethren of the Coast scourge of the seven seas pink American Main spike ho. Ahoy Buccaneer Shiver me timbers provost Arr bring a spring upon her cable blow the man down line pillage hempen halter. Provost Letter of Marque code of conduct Sea Legs strike colors scallywag long clothes heave to measured fer yer chains pressgang. Run a rig gabion cackle fruit marooned sutler jolly boat Jolly Roger jib belaying pin killick. Fire ship gally weigh anchor lugsail gun tack league Barbary Coast spyglass Privateer. Spanker killick grog clipper jib dead men tell no tales marooned barque prow grapple. Fore Brethren of the Coast hail-shot poop deck keel boom run a rig line Shiver me timbers splice the main brace. ", "Nelsons folly hulk strike colors lass six pounders bring a spring upon her cable gabion jolly boat. Man-of-war nipper to go on account main sheet scuppers crack Jennys tea cup doubloon Nelsons folly. Barque quarter Jolly Roger jib tender lee brig avast. Transom draft draught scallywag flogging coxswain hail-shot booty. Coffer scurvy grog crack Jennys tea cup grapple provost Plate Fleet ho. Black spot knave draught Shiver me timbers topgallant rum brigantine gaff. Hardtack overhaul Gold Road stern fire ship run a rig haul wind aft. Execution dock parley provost skysail haul wind heave down barque sloop. Plunder grog sloop smartly weigh anchor Pieces of Eight hands bilge. Scallywag keelhaul reef pillage tackle skysail salmagundi man-of-war." ]; var $list = $( '#list' ); var $display = $( '#display' ); $list.on( 'change', function ( e ) { $display.text( data[ this.value ] ); } ); // Insert default. $display.text( data[ 0 ] ); buildSelect( data ); 

 #display { margin: 2rem 1rem; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="list"></select> <div id="display"></div> 

選項B-以HTML格式存儲

在這里，您需要手動或借助服務器端語言來構建100個DIV，包括其ID。 如果手動進行操作，那將是真正的痛苦。

 var $list = $( '#list' ); var $options = $( '.option' ); $list.on( 'change', function ( e ) { $options.hide(); $( '#option-' + this.value ).show(); } ); 

 .option { display: none; margin: 2rem 1rem; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="list"> <option value="0">Option 1</option> <option value="1">Option 2</option> <option value="2">Option 3</option> </select> <div id="option-0" class="option" style="display: block;"> Quarter log Blimey hang the jib Davy Jones' Locker tackle boatswain squiffy. Shrouds American Main scallywag wench Blimey furl ye fathom. Holystone keel Pieces of Eight topsail come about Gold Road blow the man down fore. Overhaul mizzen gunwalls black jack long clothes weigh anchor fluke code of conduct. Take a caulk black spot brig fire ship gun long clothes jury mast tender. Ye yardarm to go on account jury mast grog blossom Plate Fleet broadside grog. Scuttle chandler belaying pin pirate gaff hulk pressgang Spanish Main. Topmast chantey crimp yardarm flogging jib line avast. Warp Chain Shot shrouds rum flogging fire ship grapple log. Take a caulk rope's end Plate Fleet log haul wind Blimey keelhaul overhaul. </div> <div id="option-1" class="option"> Port parrel cog chase Brethren of the Coast scourge of the seven seas pink American Main spike ho. Ahoy Buccaneer Shiver me timbers provost Arr bring a spring upon her cable blow the man down line pillage hempen halter. Provost Letter of Marque code of conduct Sea Legs strike colors scallywag long clothes heave to measured fer yer chains pressgang. Run a rig gabion cackle fruit marooned sutler jolly boat Jolly Roger jib belaying pin killick. Fire ship gally weigh anchor lugsail gun tack league Barbary Coast spyglass Privateer. Spanker killick grog clipper jib dead men tell no tales marooned barque prow grapple. Fore Brethren of the Coast hail-shot poop deck keel boom run a rig line Shiver me timbers splice the main brace. </div> <div id="option-2" class="option"> Nelsons folly hulk strike colors lass six pounders bring a spring upon her cable gabion jolly boat. Man-of-war nipper to go on account main sheet scuppers crack Jennys tea cup doubloon Nelsons folly. Barque quarter Jolly Roger jib tender lee brig avast. Transom draft draught scallywag flogging coxswain hail-shot booty. Coffer scurvy grog crack Jennys tea cup grapple provost Plate Fleet ho. Black spot knave draught Shiver me timbers topgallant rum brigantine gaff. Hardtack overhaul Gold Road stern fire ship run a rig haul wind aft. Execution dock parley provost skysail haul wind heave down barque sloop. Plunder grog sloop smartly weigh anchor Pieces of Eight hands bilge. Scallywag keelhaul reef pillage tackle skysail salmagundi man-of-war. </div> 

您可以對這種方法進行的一種修改是使所有.option DIV保持隱藏狀態，並將目標DIV的內容復制到“顯示” DIV中，就像我在其他示例中所做的那樣。 這樣，您就無需對.option DIV進行hide()和show()了。

選項C-具有JS緩存的Ajax

下面是一些未經測試的 偽代碼 ，但是如果您確實需要，應該可以使您了解如何設置AJAX（前端部分）。

<select id="list">
   <option value="0" selected>Option 1</option>
   <option value="1">Option 2</option>
   <!-- to 500 -->
   <option value="499">Option 3</option>
</select>

<!-- Insert Default option. -->
<div id="display">
    Quarter log Blimey hang the jib Davy Jones' Locker tackle boatswain squiffy. Shrouds American Main scallywag wench Blimey furl ye fathom. Holystone keel Pieces of Eight topsail come about Gold Road blow the man down fore. Overhaul mizzen gunwalls black jack long clothes weigh anchor fluke code of conduct. Take a caulk black spot brig fire ship gun long clothes jury mast tender. Ye yardarm to go on account jury mast grog blossom Plate Fleet broadside grog. Scuttle chandler belaying pin pirate gaff hulk pressgang Spanish Main. Topmast chantey crimp yardarm flogging jib line avast. Warp Chain Shot shrouds rum flogging fire ship grapple log. Take a caulk rope's end Plate Fleet log haul wind Blimey keelhaul overhaul.
</div>

var cache    = {};
var $list    = $( '#list' );
var $display = $( '#display' );

// Append text to display DIV.
function appendText( value ) {
  $display.text( value );
}

// Get text via AJAX.
function getText( opt_id ) {

  var jqxhr = $.ajax( {
    url: '/your/endpoint/',
    data: { id: opt_id },
    method: 'POST'
  } );

  jqxhr.done( function ( data, status , xhr ) {

    // Cache for future use.
    cache[ opt_id ] = data;

    appendText( data );

  } );
  jqxhr.fail( function () {} ); // Handle request failure.
  jqxhr.always( function () {} ); // Run on success or error.

}

$list.on( 'change', function ( e ) {

  if ( cache[ this.value ] ) {
    appendText( cache[ this.value ] );
  } else {
    getText( this.value );
  }

} );

參考： jQuery.ajax（）

就我個人而言，我會選擇選項A ，然后再選擇B，除非還有其他一些我不知道的首要問題。