I'm trying to chain selects with Chosen and Chained but I'm not sure if I'm implementing .chosen().change() correctly or if the error I'm getting is a bug.

Here's what I've got:

<select id="Inputfield_date" name="date" data-placeholder="Select event date">
<option value=""></option>
<option value="WA">WA</option>
<option value="QLD">QLD</option>
<option value="VIC">VIC</option>
<option value="NSW">NSW</option>
<option value="SA">SA</option>

<select id="Inputfield_code" name="code" data-placeholder="Response code">
<option value=""></option>
<option value="601" class="WA">601</option>
<option value="602" class="WA">602</option>
<option value="402" class="QLD">402</option>
<option value="403" class="QLD">403</option>
<option value="301" class="VIC">301</option>
<option value="302" class="VIC">302</option>
<option value="201" class="NSW">201</option>
<option value="203" class="NSW">203</option>
<option value="501" class="SA">501</option>

$('#Inputfield_date').chosen().change(function() {
which gives me Uncaught RangeError: Maximum call stack size exceeded.

I also have to show another hidden field if a particular option is chosen and I'm not sure what the correct approach is for that.

I don't have to use Chained if anyone has a solution that involves that, but I do have to use Chosen, or a script that modifies the look of the select elements to match the design I've been given.