Chosen maxselected event not firing

Question

I am using the jquery chosen.js plugin http://harvesthq.github.io/chosen/ and have set the limit that a user can select as 5 using {max_selected_options}. However, I would like to trigger an alert if a user tries to select more than 5. I have tried the follwoing code, but that does nothing. Can someone show me the correct way to code this as it is driving me nuts.

Thanks

jquery code

$(function() { 
$("#box_rtv").chosen({

 width: "250px",
 max_selected_options: 5

 });
 });
 $("#box_rtv").bind("chosen:maxselected", function () { alert("You can only select up to 5 boxes"); });
 $("#box_rtv").chosen().change( function () { alert("You can only select up to 5 boxes"); } );

html code

<div class="fieldset">
    <h1><span>Select Box(es) Reference</span></h1>
      <p>
        <select data-placeholder="Choose a box..." multiple required="required" class="chosen-select" name="box_rtv[]" id="box_rtv">
          <option value=""></option>
        </select>
      <span></span>
        <a style="margin-left: 12px;" href="javascript:void(0)" class="brtvhelp">Help</a>
      </p>
    </div>

Answer 1

Try out the following code..

    $(function() {
      $(".chosen-select").chosen({
        width: "100%",

        max_selected_options: 3
      });
      $(".chosen-select").bind("chosen:maxselected",
            function() {
                alert('Only Three selections');
        });
     });

In your code above the maxselect event is outside of $(document).ready...