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

Question

当有人从下拉列表中选择名称时，我试图让带有个人资料信息的单个 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"
    });
});

Answer 1

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

Answer 2

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

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

看看它是否有效。

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

Answer 3

尝试：

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