帶下拉鍊接的HTML下拉表單

我目前在頁面上有2個鏈接，http://test.medialayer.net/，我想把它放在html下拉列表中，當前代碼在下面，任何具有類ezjax的錨點都會將鏈接頁面加載到div，ezjax內容。帶下拉鍊接的HTML下拉表單

<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>

我發現低於這個代碼將我想要去的方向，除了平變化我希望它只是打開我的鏈接在ezjax內容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>

再次我感謝所有那些誰看看。 Chuck

僅供參考，其餘部分代碼會使加載發生。

頁面上

<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>

來源

2011-03-08 Chuck

你可以把你的代碼放在jsfiddle上嗎？ – LostLin 2011-03-08 01:20:54

這是鏈接，http://jsfiddle.net/cwilson/WNR3x/它在jsfiddle上的工作方式與我在網站上的工作方式不同，http://test.medialayer.net/我會繼續與它合作看看我能否讓它工作一樣。 – Chuck 2011-03-08 01:41:45

你不需要在JS Fiddle的'

帶下拉鍊接的HTML下拉表單

相關問題