Загрузить вкладку Ajax через Selectbox

Question

У меня есть очень полезный jquery-скрипт из http://www.ajaxblender.com/howto-create-custom-jquery-tabs.html, который загружает контент через 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

Я знаю, что решение будет зависеть от изменения этой части и вызова встроенной функции из окна выбора

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

По API jquery @ 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());

});