0

I have a form similar to the one below, I am using script editor in web parts on SharePoint Online. If I select 'YES' it will reveal a second drop down list hiding 'Item 1'.

If I select 'NO', it will reveal the same list but hiding 'Item 2' and 'Item 3'. It works properly the first time, but if I go back and forth between 'YES' and 'NO' then the second drop down list will hide Item 1,2, and 3.

Is there a way to fix it from filtering multiple times?

<script src="https://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"> </script> 
<script type="text/javascript">
$(document).ready(function(){
   $('nobr:contains("List 2")').closest('tr').hide();  
    //Show/hide columns based on Drop Down Selection 
   $("select[title='List 1']").change(function() {
 
 if ($("select[title='List 1']").val() == "YES") 
   {
     $('nobr:contains("List 2")').closest('tr').show();
     $(":input[title='List 2']").children("option[value='ITEM 1']").hide();
     
   } 
 else if($("select[title='List 1']").val() == "NO") 
   {
     $('nobr:contains("List 2")').closest('tr').show();
     $(":input[title='List 2']").children("option[value='ITEM 2']").hide();
     $(":input[title='List 2']").children("option[value='ITEM 3']").hide();
   }
   
   else  
   {
     $('nobr:contains("List 2")').closest('tr').hide();
   }
   });
});
</script>

enter image description here

1

Try using below code:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('nobr:contains("List 2")').closest('tr').hide();

        //Show/hide columns based on Drop Down Selection 
        $("select[title='List 1']").change(function() {
            //Show all options first
            $(":input[title='List 2']").find("option").show();

            if ($("select[title='List 1']").val() == "YES") {
                $('nobr:contains("List 2")').closest('tr').show();
                $(":input[title='List 2']").children("option[value='ITEM 1']").hide();

            } else if ($("select[title='List 1']").val() == "NO") {
                $('nobr:contains("List 2")').closest('tr').show();
                $(":input[title='List 2']").children("option[value='ITEM 2']").hide();
                $(":input[title='List 2']").children("option[value='ITEM 3']").hide();
            } else {
                //Optional --> Hide all options
                //$(":input[title='List 2']").find("option").hide();
                $('nobr:contains("List 2")').closest('tr').hide();
            }
        });
    });
</script>
2
  • 1
    thank you, that was what i needed.
    – williswin
    Oct 23 '20 at 14:41
  • I see that there is show and hide. How do I set a value equal to something? $("input[Title='List 1']").val('Yes'); something like this?
    – williswin
    Oct 28 '20 at 20:03

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.