Question

I’d like to have a select box control display / hiding of sections in a form

First, I added an .change event on the item, and this works if I actually change the item

$('#mySelect').change(
       function() {
            updateSections($(this));
       });

Then all I wanted is to have the .change event be called at least once, when the page is loaded

The only way I could think of is in $(document).ready which seems like a detached location

$(document).ready(function(){
    updateSections($('#mySelect'));

}

The main issue is that I don’t have the ID of the item from where I write the function (generated code)

So I would like to do something like this (conceptional code), and don’t know if there is any way to do it

$('#mySelect').change(
       function() {
            updateSections($(this));
       }).init(
       function() {
            updateSections($(this));
       });

.load() only works on a / img tags

Also from a design perspective, the onDraw of an item is a standard event in any UI framework, and having one event directly on the object, and one on the document looks weird to me

Answer 1

jQuery will allow you to just call the .change() method on load. You might do something like this:

$(document).ready(function() {
    $('#mySelect').change(function() {
        updateSections($(this));
    });

    $('#mySelect').change();
});

You can probably put .change() after the first $('#mySelect') occurrence for brevity, but I wanted to be verbose; the $('#mySelect').change(); will fire the defined .change() event on the select box.