Chaining selects with Chosen -
i'm trying chain selects chosen , chained i'm not sure if i'm implementing .chosen().change() correctly or if error i'm getting bug.
here's 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> <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"); });
which gives me uncaught rangeerror: maximum call stack size exceeded.
edit: need hide/show field if particular option chosen , i'm not sure correct approach that.
using example chained documentation i've put example on jsfiddle.
and simple, initialize chained , chosen do, , trigger chosen:updated
event if 1 of 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'); });
edit:
for second question i've updated fiddle bit: http://jsfiddle.net/koenpunt/fzh9g/2/
chosen sends option selected alongside change event, checking if specific option selected easy:
$('#series').on('change', function(event, data){ // first check if data exists, because if change event // isn't triggered chosen `data` undefined if(data){ if(data.selected == 'a5'){ $('#submit').hide(); }else{ $('#submit').show(); } } });
as notice, if select 'audi' , 'a5' button disappear.
Comments
Post a Comment