使用下拉菜单时触发颜色框

发布于 2024-12-22 10:05:14 字数 1670 浏览 1 评论 0原文

当有人从下拉列表中选择名称时，我试图使用 colorbox 获取包含个人资料信息的单个 div 来覆盖。因此，如果有人单击下拉列表中值为 #p01 的“名称 1”，则 ID 为 #p01 的 div 将使用 colorbox 显示。

但是，我似乎无法让它发挥作用。任何人都可以看到我的代码中可能导致问题的任何内容吗？

非常感谢，

Osu

HTML

表单：

<form action="" method="post" id="chooseprofile">
    <select name="profiledd" id="profiledd">
        <option value="" selected="yes">- Please select -</option>
        <option value="#p01">Name 1</option>
        <option value="#p10">Name 2</option>
        ...
    </select>
</form>

Div 覆盖：

<div style="display:none;">
    <div id="p01" class="profile">
        <img src="#" />
        <div class="profdesc">
            ...content...
        </div> <!-- End div.profdesc -->
        <div class="clear">&nbsp;</div>
    </div>
</div> <!-- End div#p01 -->

<div style="display:none;">
    <div id="p10" class="profile">
        <img src="#" />
        <div class="profdesc">
            ...content...
        </div> <!-- End div.profdesc -->
        <div class="clear">&nbsp;</div>
    </div>
</div> <!-- End div#p10 -->
...etc.

JQUERY

$("#profiledd").change(function() { 
    var currentProfile = $(this).val(); // Grab select value and show correct overlay:
    $(currentProfile).colorbox({
        inline:true,
        current: '',
        innerWidth:"700px",
        innerHeight:"400px",
        transition:"fade"
    });
});

原文

I'm trying to get individual divs with profile information to overlay using colorbox when someone selects a name from a dropdown. So, if someone clicked on 'Name 1' which has a value of #p01 in my dropdown, then the div with the ID of #p01 would be displayed using colorbox.

However, I can't seem to get this to work. Can anyone see anything in my code that might be causing the problem?

Many thanks,

Osu

HTML

Form:

<form action="" method="post" id="chooseprofile">
    <select name="profiledd" id="profiledd">
        <option value="" selected="yes">- Please select -</option>
        <option value="#p01">Name 1</option>
        <option value="#p10">Name 2</option>
        ...
    </select>
</form>

Div overlays:

<div style="display:none;">
    <div id="p01" class="profile">
        <img src="#" />
        <div class="profdesc">
            ...content...
        </div> <!-- End div.profdesc -->
        <div class="clear"> </div>
    </div>
</div> <!-- End div#p01 -->

<div style="display:none;">
    <div id="p10" class="profile">
        <img src="#" />
        <div class="profdesc">
            ...content...
        </div> <!-- End div.profdesc -->
        <div class="clear"> </div>
    </div>
</div> <!-- End div#p10 -->
...etc.

JQUERY

$("#profiledd").change(function() { 
    var currentProfile = $(this).val(); // Grab select value and show correct overlay:
    $(currentProfile).colorbox({
        inline:true,
        current: '',
        innerWidth:"700px",
        innerHeight:"400px",
        transition:"fade"
    });
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瞎闹 2024-12-29 10:05:14

如果弹出 Jquery，请检查是否存在 Jquery 冲突...

要测试这一点，请执行一个简单的 jquery 测试，例如
警报($('body').html());

看看它是否有效。

也许尝试 inline:'true' （带引号）

回复收藏 0 原文

我也只是我 2024-12-29 10:05:14

尝试：

$("#profiledd").change(function() { 
    var currentProfile = $(this).val(); // Grab select value and show correct overlay:
     $(this).colorbox({
        inline:true,
        current: '',
        innerWidth:"700px",
        innerHeight:"400px",
        transition:"fade"
    });
});

Try:

$("#profiledd").change(function() { 
    var currentProfile = $(this).val(); // Grab select value and show correct overlay:
     $(this).colorbox({
        inline:true,
        current: '',
        innerWidth:"700px",
        innerHeight:"400px",
        transition:"fade"
    });
});

回复收藏 0 原文

围归者 2024-12-29 10:05:14

发现问题了！这是所需的代码 - 请注意 $.colorbox({ 部分 - 您可以在此处的 Colorbox 项目页面的公共方法下阅读更多信息：http://jacklmoore.com/colorbox/。

感谢您的贡献 MMR 和 Sudhir：

$("#profiledd").change(function() { 
        var currentProfile = $(this).val(); // Grab select value and show overlay : 
        $.colorbox({
            inline:true,
            href:currentProfile,
            current: '',
            innerWidth:"700px",
            innerHeight:"400px",
            transition:"fade"
        });
    });

Found the problem! This is the code that is needed - note the $.colorbox({ part - you can read more under the Public Methods of the Colorbox project page here: http://jacklmoore.com/colorbox/.

Thanks for your contributions MMR and Sudhir:

$("#profiledd").change(function() { 
        var currentProfile = $(this).val(); // Grab select value and show overlay : 
        $.colorbox({
            inline:true,
            href:currentProfile,
            current: '',
            innerWidth:"700px",
            innerHeight:"400px",
            transition:"fade"
        });
    });

回复收藏 0 原文

~没有更多了~