JS Cascade code not working for SPO document library edit form

Question

I have a document library setup with content type enabled in SharePoint online. There are total 4 content types and out of those 4, for content type called 'Closing Documents', I want to perform cascading.

There are two choice dropdowns available under Closing Documents content type: The parent is called 'TPHub DocType' (first dd) and child is 'Closing DocType' (second DD).

Now based on the choice selected in TPHub DocType, I would like to hide/show certain choices in the Closing DocType column, I do not want to leverage SPServices, just basic JS to achieve this, So I am using the code below.

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    tpcascade();
});

function tpcascade(){



$("select[title='TPHub DocType']").change(function() {
        var tphubdoctype = $("select[title='TPHub DocType']").val();
        switch(tphubdoctype){
           case 'Organizational Documents of the Fund':

$("select[title='Closing DocType']").find('option:contains("Limited Liability Company Agreement")').hide();
//Similar to above statement, I added 136 more hide statements

$("select[title='Closing DocType']").find('option:contains("Operating Agreement")').show();
$("select[title='Closing DocType']").find('option:contains("Good Standing Certificate")').show(); 
$("select[title='Closing DocType']").find('option:contains("Certificate of Formation")').show();

    break;

case 'Organizational Documents of Fund Manager':

$("select[title='Closing DocType']").find('option:contains("Limited Liability Company Agreement")').hide();
//Similar to above statement, I added 136 more hide statements

$("select[title='Closing DocType']").find('option:contains("ByLaws")').show(); 
$("select[title='Closing DocType']").find('option:contains("Resolutions")').show(); 
$("select[title='Closing DocType']").find('option:contains("Articles of Incorporation")').show();
$("select[title='Closing DocType']").find('option:contains("Incumbency Certificate")').show(); 
$("select[title='Closing DocType']").find('option:contains("Transaction Specific NMTC Delegation")').show(); 


    break;


        }
    });
}
</script>

Output for Org docs of the fund: (first case statement)

Output for second case statement:

FYI, wrap and unwrap are showing the exact same behavior as hide and show.For each case first I am adding all 137 choices to hide them first and then respectively show choices based on case value. Output of first statement is simply off, you can see, I have only enabled show for 3 choices and dropdon shows other values. ANy thoughts? For some reason, the code does not work. Can someone help me correct it, thanks in advance.

Answer 1

The following code for your reference.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    cascade();
});
function cascade(){
    $("select[title='Closing DocType']").find('option:contains("Operating Agreement")').wrap('<span/>');
    $("select[title='TPHub DocType']").change(function() {
        var tphubdoctype = $("select[title='TPHub DocType']").val();
        switch(tphubdoctype){
            case 'Organizational Documents of the Fund':        
                $("select[title='Closing DocType']").find('option:contains("ByLaws")').wrap('<span/>');
                $("select[title='Closing DocType']").find('option:contains("Resolutions")').wrap('<span/>');
            break;
            case 'Organizational Documents of Fund Manager':
                $("select[title='Closing DocType']").find('option:contains("ByLaws")').unwrap(); 
                $("select[title='Closing DocType']").find('option:contains("Operating Agreement")').unwrap();
                $("select[title='Closing DocType']").find('option:contains("Certificate of Formation")').wrap('<span/>');
            break;
        }
    });
}
</script>

Answer 2

I was able to get this to work by using the code mentioned here by Mark Rackley, its using REST, easy to setup and works great, hope it helps someone.