Question

我目前在页面上有2个链接http://test.medialayer.net/，我想将其放在html下拉列表中，当前代码如下，任何带有类ezjax的锚点都会将链接页面加载到div中，ezjax内容。

<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我希望它只是在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>

再次感谢所有看过的人。卡盘

这里的参考是使加载发生的其余代码。

页面

<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事件，而不是像现在一样点击
使用下拉列表的值代替 link's href

改变这些行

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

到这个

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

似乎有效。

显然，您需要像示例和类.ezjax一样提供选择值。

希望它也适合你。：）

HTML下拉表单，下拉列表中包含链接

1 个答案: