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 Answer 1

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, 2020 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, 2020 at 20:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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