Question

当有人从下拉列表中选择一个名字时，我正试图让个人div与个人资料信息叠加使用colorbox。因此，如果有人在我的下拉列表中点击了名称为＃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.

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"
    });
});

Answer 1

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

为了测试这个做一个简单的jquery测试警报（$（ '主体'）的HTML（））;

看看它是否有效。

也许可以尝试内联：'true'（带引号）

Answer 2

发现问题了！这是需要的代码 - 请注意$.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"
        });
    });

使用下拉列表时触发颜色框

HTML

JQUERY

2 个答案: