dropkick callback issue

Question

I using dropkick js to style dropdown forms but have one little problem. What I want to do is to make two thing when the selection is made: generate another dropdown based on the selection and print the value in console (just for a simplicity). Also I want to print the value of the generated dropdown in console as well. So here is what my code looks like:

$('.dropStyled').dropkick({
        change: function (value, label) {
            $('#subCategory').find('span.sub').html('<select id="selectSubCountry" name="subCountry" class="dropStyledSub" tabindex="2"></select>');                
            $('#selectSubCountry').append($("<option></option>").attr("value",'test').text(label));
            $('.dropStyledSub').dropkick(function() { //this is the dropdown I create dynamically
                change: function(val, lab) {
                    console.log(val);
                }
            });

            console.log(value);
        }
    });

The problem is that I get "Uncaught SyntaxError: Unexpected token ," on this line:

change: function(val, lab) {

Any ideas?

Anyone figured out how to have variable widths? http://stackoverflow.com/questions/11769888/how-to-individually-target-multiple-dropdowns-in-css-for-dropkick-plug-in — user1318135, Aug 02 '12 at 22:54

score 1 · Answer 1 · answered Jan 08 '12 at 13:21

The dropkick function takes an object as an argument, so you have to drop the function from the call, i.e.

$('.dropStyledSub').dropkick({
    change: function(val, lab) {
        console.log(val);
    }
});

The way you are passing is really syntactically incorrect, because you're mixing a function declaration in form function() {...} with an object declaration in form { change : function() {...} } together.

score 1 · Accepted Answer · answered Jan 08 '12 at 13:21

Remove the function() in the parameter of the 2nd dropkick, it has to be an object:

$('.dropStyled').dropkick({
    change: function (value, label) {
        ...
        $('.dropStyledSub').dropkick({ //this is the dropdown I create dynamically
            change: function(val, lab) {
                console.log(val);
            }
        });
        ...
    }
});

dropkick callback issue

2 Answers2