0

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) enter image description here

Output for second case statement:

enter image description here

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.

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>
  • The code no longer works now, I updated the script I am using based on your answer, please check and let me know if anything is wrong, – mdevm Mar 11 at 14:43
  • I have total of 137 different choice values in closing doctype column, for which I am writing wrap and unwrap, is there a limitation size wise? – mdevm Mar 11 at 16:22
  • Check my code above, you need wrap the choice value before unwrap it. $("select[title='Closing DocType']").find('option:contains("Operating Agreement")').wrap('<span/>'); – LZ_MSFT Mar 12 at 0:59
  • The thing is in my case, TPHub Doctype column has 20 choice values and Closing DocType has 137 choice values. So now based on selection in TPHub Doctype column, I have to only show 3-4 choices values in Closing DocType and hide others and I am going nuts , can't get it to work. – mdevm Mar 12 at 1:28
  • Should I specify all 137 choices with wrap first? And then respectively unwrap for each case. One thing to mention is, there are scenarios where for two different case values, I have to unwrap the same column value and its breaking when that happens. I think I have to leverage SPServices now. – mdevm Mar 12 at 2:10
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.