javascript - 使用 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，因为它们包含大量数据(Iframes、外部调用)并且页面需要花费大量时间(将近半分钟)来加载所有 div在显示预选的第一个 div 之前，我尝试使用 ajax，因为我知道我们可以在选择时动态加载其他 div，而不是在页面加载时一次加载它们，我尝试用 windows 删除 documet.ready()。加载功能，但它没有工作。如果我遗漏了什么，有人可以帮我解决这个问题吗。

更新1:

代码工作正常，我没有任何问题。我想一次只加载选定的 div，而不是将所有 div(大约 500 个)与页面一起加载，因为加载大量数据(div - 大约 500 个包含 Iframe 的数据)需要花费大量时间。
相反，我想仅在选择时动态地分别加载每个 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

您有多个不使用 <iframe> 的选项秒。我不会太担心您的 500 个文本 block 的占用空间，因为它们不是特别大。

选项 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，就像我在其他示例中所做的那样。那么你不需要 hide()和 show() .option DIV。

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