使用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，除非还有其他一些我不知道的首要问题。