How to show jQuery colorbox popup alert on the onchange event of select control in jQuery?

Question

Actually I want to show the different hidden jQuery colorbox popup on the selection of each option from the select control. In short the concerned jQuery colorbox popup should be called upon selection of concerned option. The code for hidden colorbox popups along with the jQuery code which I tried to show them is as follows:

    <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>

I tried above code but not able to show the corresponding colorbox popup. CAn you help me in this regard please? Thanks in advance. Thanks in advance.

Answer 1

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

You can do this using below code inside above change event code.

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

Complete Code

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

Working Demo