Show/Hide field in SharePoint O365 based on cascadeing dropdown value selection

Question

I am new to SharePoint forms in O365. I have a created a form which has cascading drop downs.

1) Country - A normal drop down field

2) State - A cascading drop down field linked to Country

3) City - A cascading drop down field linked to State

If the user selects a city named "XYZ" I want another field "Comments" hidden.

Using some online tutorials i learnt and executed the below code which works if its an independent drop down field. As my drop-down field "City" is linked to other drop-down this code is not working.

Any help on executing the correct code.

<script src="https://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //Show/hide columns based on Drop Down Selection
        $("select[title='City Required Field']").change(function() {
           if ($("select[title='City Required Field']").val() != "XYZ")
           {
              $('nobr:contains("Comments")').closest('tr').hide();
           }
           else
           {
              $('nobr:contains("Comments")').closest('tr').show();
           }
       });
    });
</script>

Answer 1

You can make use of id attribute of your City dropdown to call Change event. In this case, I assumed id as city.

$(document).ready(function(){
$("#city").change(function() {
    if(this.value=="XYZ")
    {
        $('#Comments').css('display','none');
    }
});});

Answer 2

I don't know how to achieve that using JS scripts, but I would like to share with you how to do it with PowerApps (which is really cool and even non-developers can achieve that)

Please refer to Mr Shane Young which i find him very professional guy, and here the link: PowerApps Cascading Dropdown , here you will find exactly what you want and more !

Good luck.