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