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>