javascript - 次のシナリオで、Mozilla Firefox で正しく機能する jQuery カラーボックスが Google Chrome で機能しないのはなぜですか?

Question

私のHTMLとjQueryコードは次のとおりです。これは Mozilla Firefox では正しく機能しますが、Google Chrome では機能しません:

<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">Change Password</option>
</select>
<!-- The following four popups are not getting displayed when there is a call for them -->
<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 Class and Section</h2>
      <div class="c-content">         
        <h3>Are you sure to update class and section for 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">Change</a> 
    </div>
  </div>
</div>
<!-- Only this eorror popup is getting displayed when there is a call to it-->  
<div class="hidden">
  <div id="errmsg" class="c-popup">
    <h2 class="c-popup-header">Error</h2>
    <div class="c-content">         
      <h3>Please select at least one user</h3>
      <a href="#"class="c-btn">Ok</a>
    </div>
  </div>
</div>

Javascript:

$(document).ready(function() { 
  $('select[name="select_option"]').change(function(e) {
    e.preventDefault();
    $(this).clearQueue(); 
    var checkedUsers = $('div .ez-checked input').length;    
    if(checkedUsers == 0) {       
      $('select[name="select_option"]').prop('selectedIndex',0);
/*Here I'm giving the call to error colorbox. It's working fine in both Firefox as well as chrome*/
      $.colorbox({inline:true, width:444, href: "#errmsg"});
      $(".c-btn").bind('click', function(){
        $.colorbox.close();
      });
      return false;
    } else { 
      if($("#ckbCheckAll").hasClass('ez-checked')) { 
        var childchklen = $('div .ez-checked input:not(#ckbCheckAll)').length;        
        if(childchklen == 0) {          
          $('select[name="select_option"]').prop('selectedIndex',0);
/*Here I'm giving the call to error colorbox. It's working fine in both Firefox as well as chrome*/
          $.colorbox({inline:true, width:444, href: "#errmsg"});
          $(".c-btn").bind('click', function(){
            $.colorbox.close();
          });
          return false;
        }
      }

      var classname = $('select[name="select_option"]')
        .find(':selected').attr('class');
/*Here I'm giving the call to corresponding colorbox. It's working fine in Firefox but not in chrome*/
      $('.'+classname).colorbox({inline:true, width:666});

      $(".c-btn").bind('click', function(){
        $.colorbox.close();
      });              
    }      
  });
});

また、コンソールにエラーは見つかりませんでした。カラーボックスの呼び出し中にハードコードされたクラス名を使用してこの問題を解決しようとしましたが、それでも呼び出されたり表示されたりしません。これを Google Chrome で実行できるようにするのを手伝ってくれる人はいますか? 前もって感謝します。