使用 Chosen 链接选择

我正在尝试将选择与Chosen https://github.com/harvesthq/chosen and Chained http://www.appelsiini.net/projects/chained但我不确定我是否正确实现了 .chosen().change() 或者我收到的错误是否是一个错误。

这是我所得到的：

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

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

$('#Inputfield_date').chosen().change(function() {
    $("#Inputfield_code").chained("#Inputfield_date");
});

这给了我未捕获的范围错误：超出最大调用堆栈大小.

编辑：如果选择了特定选项，我现在还需要隐藏/显示另一个字段，并且我不确定正确的方法是什么。

使用链接文档中的示例，我提出了一个jsfiddle 上的示例 http://jsfiddle.net/koenpunt/Fzh9G/.

它实际上相当简单，只需像平常一样初始化 Chained 和 Chosen，然后触发chosen:updated如果其中一项选择发生更改，则会发生事件：

var selects = $('#Inputfield_code, #Inputfield_date');
$('#Inputfield_code').chained('#Inputfield_date');
selects.chosen({width: '300px'})

selects.on('change', function(){
    selects.trigger('chosen:updated');
});

EDIT:

对于你的第二个问题，我稍微更新了小提琴：http://jsfiddle.net/koenpunt/Fzh9G/2/ http://jsfiddle.net/koenpunt/Fzh9G/2/

选择会与更改事件一起发送选择的选项，因此检查是否选择了特定选项很容易：

$('#series').on('change', function(event, data){
    // First check if data exists, because if the change event
    // isn't triggered by Chosen `data` is undefined
    if(data){ 
        if(data.selected == 'a5'){
            $('#submit').hide();
        }else{
            $('#submit').show();
        }
    }
});

您会注意到，如果您选择“奥迪”和“A5”，该按钮将会消失。