HTML Dropdown Form with links in the dropdown

I currently have 2 links on the page, http://test.medialayer.net/, which I'd like to put in an html dropdown, current code below, any anchor with the class ezjax will load the linked page into the div, ezjax content.

<div id="homePagePropertySearchBox">
    <a class="ezjax" href="../../../searchForms/searchOne.html">Search One</a>
    <a class="ezjax" href="../../../searchForms/searchTwo.html">Search Two</a>
    &开发者_如何学运维lt;div id="ezjax_content"> 
        <!-- THIS IS THE CONTAINER WHERE THE CONTENT WILL BE LOADED --> 
    </div>
</div>

I found this code below which is going the direction I want to go, except onchange I want it to just open my link in the 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>

Once again my thanks to all those who take a look. Chuck

For reference here is the rest of the code that makes the loading happen.

on page

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

linked js file

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>

I'm sure there is a better way to do it (by rebinding the event?), but I got this to work with a small edit to the EZJax plugin.

Changes are

• Trigger Ajax event on change rather than on click as now
• Use the dropdown's value instead of link's href

So altering these lines

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

to this

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

seems to work.

Obviously you need to give the select values as in your example and the class .ezjax.

Hope it works for you too. :)