using the onchange event with jquery

I have a list, when a user select a particular option (named Customize) using the onchange event then a div (with id of customizeOption) pops up and once the user is finished with the div he/she will click on a button (with id of donebtn). Is it good idea to have a function like this and using the onchange events? Any other suggestions are really appreciated.

function optionCheck(events) {

    if(events.value=="Customize") {
        $('document').ready(function () {
            $("#customizeOption").show(400);
            $("#donebtn").click(function () {
                $("#custo开发者_如何学PythonmizeOption").hide(400);
            });
        });
    }
}

$('document').ready(function () {});

This is only to mimic the onload of the body.

We can rewrite the above code like.

function optionCheck(events) {
    if(events.value=="Customize") {
        $("#customizeOption").show(400);
        $("#donebtn").click(function () {
            $("#customizeOption").hide(400);
        });
    }
}

Make sure that you write this after the DIVs are rendered. And also they are available when your browser is compiling this JS. I recommend that this script should go in the bottom of the page.

EDITED

Assuming that the SELECT BOX has the class mySelectBox, The following function will work for you if you place it any where in the code.

$('document').ready(function () {
    $('.mySelectBox').change(function(){
        if( $(this).attr('value')) == "Customize" ) {
            $("#customizeOption").show(400);
            $("#donebtn").click(function () {
                $("#customizeOption").hide(400);
            });
        }
    });
});