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