选择链式选择 [英] Chaining selects with Chosen

问题描述

我正在尝试使用 Chosen 和

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.

这就是我所拥有的:

<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");
});

这给了我未捕获的RangeError:超出了最大调用堆栈大小.

如果选择了特定选项，我现在还需要隐藏/显示另一个字段，我不确定该使用哪种正确方法.

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

推荐答案

使用链式文档中的示例，我设置了关于jsfiddle的示例.

Using the example from the Chained documentation I've put up an example on jsfiddle.

这实际上很简单，只需像平常一样初始化Chained和Chosen，然后在选择之一更改的情况下触发chosen:updated事件:

And it is actually fairly simple, just initialize Chained and Chosen as you would normally do, and then trigger the chosen:updated event if one of the selects changes:

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

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

对于第二个问题，我已经对小提琴进行了一些更新: http://jsfiddle.net/koenpunt/Fzh9G/2/

For your second question I've updated the fiddle a bit: http://jsfiddle.net/koenpunt/Fzh9G/2/

选择发送更改事件旁边选择的选项，因此检查是否选择了特定选项很容易:

Chosen sends which option is selected alongside the change event, so checking if a specific option is selected is easy:

$('#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();
        }
    }
});

您会注意到，如果选择"Audi"和"A5"，该按钮将消失.

As you will notice, if you select 'Audi' and 'A5' the button will disappear.

这篇关于选择链式选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！