javascript to update and clear cascading dropdowns when datapage opens

[DesiLogi]

Hello,

I've got a Single Record Update datapage that has a number of cascading dropdowns. I need to check 2 values (one a table's field and the other a virtual field) and if they're not equal then make the cascading drop down values null or blank. I can get this to work for a regular text field but not cascading dropdowns. The code so far is: 

<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {
 
var x = document.querySelector('[name*=cbParamVirtual1]').value;

var y = document.getElementById("EditRecordProjectID").value;

var xclear = "";

if (x !== y){

document.getElementById("EditRecordKeyword").value = xclear;

document.getElementsByName("EditRecordArea")[0].value = xclear;


}

});

</script>

The cascading dropdown field is 'Area' and its parent is Virtual1 (Virtual1 gets an external integer parameter).  It holds a text value and has a lookup table and a custom option of 'none selected' (blank value). 

The text field 'Keyword' will update to blank if Virtual1 and ProjectID are not equal, but the 'Area' cascading dropdown won't.  

Does anyone know how to update the cascading dropdown value to blank/null if ProjectID and Virtual1 are not equal?