Question

实际上我想在select控件中选择每个选项时显示不同的隐藏jQuery颜色框弹出窗口。简而言之，应该在选择相关选项时调用相关的jQuery colorbox弹出窗口。隐藏的colorbox弹出窗口的代码以及我试图显示它们的jQuery代码如下：

    <select name="select_option">
      <option value="0">--Select Action--</option>
      <option value="1" class="delete_user" href="#deletePopContent">Delete User</option>
      <option value="2" class="disable_user" href="#disablePopContent">Disable User</option>
      <option value="3" class="update_user" href="#updatePopContent">Update Class and Section</option>
      <option value="4" class="default_user" href="#defaultPopContent">Default Password</option>
    </select>
<div class="hidden">
  <div id="deletePopContent" class="c-popup">
    <h2 class="c-popup-header">Delete USers</h2>
    <div class="c-content">         
      <h3>Are you sure to delete selected users?</h3>
      <p class="alert"><strong>You are about to perform an action which can't be undone</strong></p>
      <a href="#"class="c-btn">No</a><a href="#"class="c-btn" id="delete_url">Delete</a> 
    </div>
  </div>
</div>
<div class="hidden">
  <div id="disablePopContent" class="c-popup">
    <h2 class="c-popup-header">Disable Users</h2>
    <div class="c-content">         
      <h3>Are you sure to disable selected users?</h3>
      <p class="alert"><strong>You are about to perform an action which can't be undone</strong></p>
      <a href="#"class="c-btn">No</a><a href="#"class="c-btn" id="disable_url">Disable</a> 
    </div>
  </div>
</div>
<div class="hidden">
  <div id="updatePopContent" class="c-popup">
    <h2 class="c-popup-header">Update Users</h2>
    <div class="c-content">         
      <h3>Are you sure to update selected users?</h3>
      <p class="alert"><strong>You are about to perform an action which can't be undone</strong></p>
      <a href="#"class="c-btn">No</a><a href="#"class="c-btn" id="update_url">Update</a> 
    </div>
  </div>
</div>
<div class="hidden">
  <div id="defaultPopContent" class="c-popup">
    <h2 class="c-popup-header">Change Password</h2>
    <div class="c-content">         
      <h3>Are you sure to change password?</h3>
      <p class="alert"><strong>You are about to perform an action which can't be undone</strong></p>
      <a href="#"class="c-btn">No</a><a href="#"class="c-btn" id="default_url">Delete</a> 
    </div>
  </div>
</div>
<script language="javascript" type="text/javascript">
  $(document).ready(function()  { 
$(".delete_user").click(function(e) { 
    $(".delete_user").colorbox({inline:true, width:666});
});

$(".disable_user").click(function(e) { 
    $(".disable_user").colorbox({inline:true, width:666});

  });

$(".update_user").click(function(e) { 
    $(".update_user").colorbox({inline:true, width:666});

  });
$(".default_user").click(function(e) { 
    $(".default_user").colorbox({inline:true, width:666});

  });
});
</script>

我尝试了上面的代码，但无法显示相应的colorbox弹出窗口。你能在这方面帮助我吗？提前致谢。提前谢谢。

Answer 1

$('select[name="select_option"]').change(function(){
   alert($(this).val());
});

您可以使用上面更改事件代码中的以下代码来执行此操作。

$($(this).attr('class').colorbox({inline:true, width:666});

完整代码

$('select[name="select_option"]').change(function()
{
    var classname = $('select[name="select_option"]')
        .find(':selected').attr('class');
    $('.'+classname).colorbox({inline:true, width:666});
});

Working Demo

如何在jQuery中的select控件的onchange事件上显示jQuery colorbox弹出警报？

1 个答案: