通过选择框加载Ajax选项卡

Question

我从http://www.ajaxblender.com/howto-create-custom-jquery-tabs.html有这个非常有用的jquery脚本，它通过ajax将内容加载到目标div中。如你看到的。它被编写为使用包含href属性的标签。现在我想扩展一下功能，并允许在下拉菜单中选择适当的选项时将页面加载到目标div上。尽管我获得了大部分代码，但我对JavaScript很陌生。

这里的脚本

var containerId = '#tabs-container'; 
var tabsId = '#tabs'; 

$(document).ready(function(){ 
    // Preload tab on page load 
    if($(tabsId + ' li.current a').length > 0){ 
     loadTab($(tabsId + ' li.current a')); 
    } 

    $(tabsId + ' a').click(function(){ 
     if($(this).parent().hasClass('current')){ return false; } 

     $(tabsId + ' li.current').removeClass('current'); 
     $(this).parent().addClass('current'); 

     loadTab($(this));  
     return false; 
    }); 
}); 

function loadTab(tabObj){ 
    if(!tabObj || !tabObj.length){ return; } 
    $(containerId).addClass('loading'); 
    $(containerId).fadeOut('fast'); 

    $(containerId).load(tabObj.attr('href'), function(){ 
     $(containerId).removeClass('loading'); 
     $(containerId).fadeIn('fast'); 
    }); 
} 

的HTML

<ul class="ajaxtabs" id="tabs"> 
     <li class="current"><a href="./music-list.html">Videos</a></li> 
     <li><a href="./tab-2.html">Audio</a></li> 
     <li class="third-child"><a href="./tab-3.html">Texte</a></li> 
     <li> 
      <form id="vod_select_nav"> 
       <select id="standard-dropdown" name="standard-dropdown" class="bigbox" onchange="window.open(this.options[this.selectedIndex].value,'_top')"> 
       <option value="index.php?id=48/#" class="test-class-1">NAVIGUER PAR SERIES &amp; EPISODES</option> 
       <option value="./tab-2.html">Past. Ghislain Lukunku, Rév. Jacques Maluma &mdash; Alume La Lampe</option> 
      <option value="index.php?id=91">Past. Ghislain Lukunku, Rév. Jacques Maluma &mdash; State Of The Church</option> 
      <option value="index.php?id=97">Past. Ghislain Lukunku, Rév. Jacques Maluma &mdash; Non Le Feu Ne S'eteindra&#8230;</option> 
       </select> 
      </form> 
     </li> 
    </ul> 
    <div class="ajaxtabs-container" id="tabs-container"> 
     Loading. Please Wait... 
    </div> 

HTML中包含用于导航到不同的文件没有Ajax的选择框

我知道解决方案将取决于修改此部分并从t内联函数调用函数他选择框

$(containerId).load(tabObj.attr('href'), function(){ 
    $(containerId).removeClass('loading'); 
    $(containerId).fadeIn('fast'); 
}); 

每jQuery的API @http://api.jquery.com/attr/我知道我可以做这样的事情：

$(containerId).load(tabObj.attr('onchange'), function(){ 
    $(containerId).removeClass('loading'); 
    $(containerId).fadeIn('fast'); 
}); 

但我知道这是错误的，因为因为在这里改变的仅仅是属性。

任何帮助，将不胜感激

Answer 1

代替$(tabsId + ' a').click()，绑定你下拉的change事件。您将获得下拉菜单项作为参数，您可以读取其值并导航到所需的页面。

这会给你所选择的项目

$('#standard-dropdown').change(function (item) { 
    alert($('#standard-dropdown').val()); 

});