jQuery에서 select 컨트롤의 onchange 이벤트에 대해 jQuery colorbox 팝업 알림을 표시하는 방법은 무엇입니까?

Question

실제로 선택 컨트롤에서 각 옵션을 선택할 때 다른 숨겨진 jQuery 색상 상자 팝업을 표시하려고합니다. 요컨대 관련 jQuery colorbox 팝업은 관련 옵션을 선택할 때 호출되어야합니다. 따라서 내가 다음과 같이 그들이 보여 시도 jQuery 코드와 숨겨진 colorbox 팝업에 대한 코드는 :

<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