2

当有人从下拉列表中选择名称时,我试图让带有个人资料信息的单个 div 使用颜色框覆盖。因此,如果有人在我的下拉列表中单击了值为 #p01 的“名称 1”,那么 ID 为 #p01 的 div 将使用颜色框显示。

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

非常感谢,

大须


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.

查询

$("#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"
    });
});
4

3 回答 3

0

发现问题了!这是所需的代码 - 请注意该$.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"
        });
    });
于 2011-12-20T09:38:04.620 回答
0

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

要对此进行测试,请执行一个简单的 jquery 测试,例如 alert($('body').html());

看看它是否有效。

也许尝试 inline:'true' (带引号)

于 2011-12-19T12:45:35.360 回答
0

尝试:

$("#profiledd").change(function() {
    var currentProfile = $(this).val(); // 获取选择值并显示正确的叠加层:
     $(this).colorbox({
        内联:真,
        当前的: '',
        内部宽度:“700px”,
        内部高度:“400px”,
        过渡:“淡出”
    });
});

于 2011-12-19T12:45:37.867 回答