the edit mode of the jquery code for 3 related selects

I have this code and it wrks well when i had to load 3 selects by selecting one category and sunbcateory and subsubcategory is loaded

jq(document).on('change','#List1',function() {
    let iVal = jq(this).val();
    //alert(iVal);
    if(iVal !== '') {
        jq.ajax({
            url : jq(this).attr('data-href'),
            type: 'POST',
            data : 'categoryId=' + iVal,
        }).done(function(response){ // posts the response 
            jq("#List2").append(response);
        });
    } else {
        alert('Please Choose a Category');
    }
});

jq(document).on('change','#List2',function() {

    let iVal = jq(this).val();
    let iCat = jq(this).find(':selected').attr('data-id');
    //alert(iVal+ ' ' +iCat);
    if(iVal !== '') {
        jq.ajax({
            url : jq(this).attr('data-href'),
            type: 'POST',
            data : 'categoryId=' + iCat + '&subcategoryId=' + iVal,
        }).done(function(response){ // posts the response 
            jq("#List3").empty();
            jq("#List3").append(response);
        });
    } else {
        alert('Please Choose a Category');
    }
});

but how can i add a trigger when my category is already loaded, once that category is loaded, i want my script to execute on load or trigger automatically so it loads correct categories/subcategory and sub sub category if it is has

my function is returning me the options populated from database, i can;t use json becuase of security so came up with solution

This is my HTML code

<tr valign="middle">
    <td><strong>Category:</strong></td>
    <td>
        <select name='List1' id="List1" data-href="doc/tx_fetchAjax.cfm?action=subcat">
            <option selected> -- SELECT ONE -- </option>
            <cfoutput query="categories">
                <option value="#ID_categoryId#" <cfif form.categoryID eq ID_categoryId>selected</cfif>>#tx_categoryname#</option>
            </cfoutput>
        </select>
    </td>
</tr>
<tr valign="middle">
    <td><strong>Sub Category:</strong></td>
    <td>
        <select name='List2' id="List2" data-href="doc/tx_fetchAjax.cfm?action=subsubcat"><option selected > -- SELECT ONE -- </option></select>
    </td>
</tr>
<tr valign="middle">
    <td><strong>Sub Sub Category:</strong></td>
    <td>
        <select name='List3' id="List3"><option selected > -- SELECT ONE -- </option></select>
    </td>
</tr>