Accessing onchange using the jQuery plugin DropKick dropdown list

Question

On my page, I have a form with three <select> drop down lists. All these lists use DropKick to make them look nice.

With DropKick added, the DDLs are no longer conventional lists and so cannot be accessed as such.

From what I've found, you can only call onchange by setting a class on the <form> tag and then using the following script:

function submitIt(){
    alert('test');  
}

$('.deviceChosen').dropkick({
    change: submitIt
});

This works, and alert shows. But also doesn't work for a couple of big reasons.

The first <select> field is the only field that gets shown as a result. And everything else on the web page after that element gets removed from the page.

So what I have is three DDLs and I want to be able to set up a function that gets called when the deviceChosen id DDL gets changed. I don't want an onchange event for the other two lists.

Is this something that is doable?

I've tried things like the below, but it just will not work.

$('#deviceChosen').on('change', function() {
    alert('dsf');
});

Answer 1

I couldn't get this working, so I ended up using selectBox instead

http://labs.abeautifulsite.net/jquery-selectBox/

Answer 2

I am able to makeit work, you can use the below mentioned code for sample purpose.

$("#ID_OF_SELECT_TAG").dropkick({
        change: function (value, label) {
               //Logic that you want to apply onchange event.
        }
    });

Thanks