HTML Dropdown Form со ссылками в выпадающем списке

Question

В настоящее время у меня есть 2 ссылки на странице, http://test.medialayer.net/,, которые я хотел бы добавить в раскрывающийся список HTML, текущий код ниже, любой якорь с классом ezjax загрузит связанную страницу в div, ezjaxcontent.

<div id="homePagePropertySearchBox">
    <a class="ezjax" href="../../../searchForms/searchOne.html">Search One</a>
    <a class="ezjax" href="../../../searchForms/searchTwo.html">Search Two</a>
    <div id="ezjax_content"> 
        <!-- THIS IS THE CONTAINER WHERE THE CONTENT WILL BE LOADED --> 
    </div>
</div>

Я нашел этот код ниже, который идет в нужном мне направлении, кроме onchange. Я хочу, чтобы он просто открыл мою ссылку в div ezjax content div

<form action="../">
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
    <option value="">Choose a destination...</option>
    <option value="http://www.yahoo.com/">YAHOO</option>
    <option value="http://www.google.com/">GOOGLE</option>
    <option value="http://www.altavista.com/">ALTAVISTA</option>
</select>
</form>

Еще раз спасибо всем, кто заглянул.Чак

Для справки приведен остальной код, который выполняет загрузку.

на странице

<script type="text/javascript">
    $(document).ready(function(){
$('.ezjax').ezjax({ 
container: '#ezjax_content',
initial: '../../../searchForms/searchOne.html',
effect: 'slide',
easing: 'easeOutBounce',
bind: 'a'
});

связанный файл js

jQuery.fn.ezjax = function(o) {

  obj = jQuery(this).attr('class'); 

  // Defaults
  var o = jQuery.extend( {
    container: '#ezjax_content',
    initial: null,
    effect: null,
    speed: 'normal',
    easing: null,
    bind: '.'+obj
  },o);

  // Load initial

    if(o.initial!=null){
        jQuery(o.container).load(o.initial,function(){
        bind();
});
}

  // Re-bind for any links internal to the content

function bind(){
    jQuery(o.container+' '+o.bind).ezjax({
        container: o.container,
        initial: null,
        effect: o.effect,
        speed: o.speed,
        easing: o.easing
    });
}

  // Main functionality

  return this.each(function() {

jQuery(this).click(function(){
    var url = jQuery(this).attr('href');

    // Check for transition effect

    if (o.effect != null) {

        // Run effect
        switch(o.effect){

            // Slide
            case 'slide':
            jQuery(o.container).animate({height:"0px"}, o.speed, function(){
                jQuery(o.container).css('overflow','hidden'); // Fix glitchies
                jQuery(o.container).load(url, function(){
                    jQuery(o.container).animate({
                        height: jQuery(o.container).children().height() + 20
                    },o.speed,o.easing,function(){
                        jQuery(o.container).css('overflow','visible'); // Undo glitchy fix
                    });
                    bind();
                });
            });
            break;

            // Fade
            case 'fade':
            jQuery(o.container).animate({ opacity: 0.0 }, o.speed, function(){
                jQuery(o.container).load(url, function(){
                    jQuery(o.container).animate({ opacity: 1.0 }, o.speed);
                    bind();
                });
            });
            break;
        }

    }
    else {
        // Standard load (no effect)
        jQuery(o.container).load(url,function(){
            bind();
        });
    }

    // Keeps the href from firing
    return false;

});

  });

};
    });
</script>

Answer 1

Я уверен, что есть лучший способ сделать это (перепривязав событие?), Но я заставил его работать с небольшим редактированием плагина EZJax.

Изменения

• Инициировать событие Ajax при изменении, а не по щелчку, как сейчас
• Использовать значение раскрывающегося списка вместо ссылки href

Таким образом, изменение этих строк

jQuery(this).click(function(){
    var url = jQuery(this).attr('href');

на это

jQuery(this).change(function(){
    var url = jQuery(this).val();

, кажется, работает.

Очевидно, что вам нужно дать значения select, как в вашем примере и классе.ezjax.

Надеюсь, это сработает и у вас.:)