0

I have five columns in my SharePoint list:

Number of Units (dropdown - 1,2,3,4) Unit 1 Address (single line text) Unit 2 Address (single line text) Unit 3 Address (single line text) Unit 4 Address (single line text)

The Number of Units field is a drop-down list that ranges from 1-4. I would like to set the form up so that if you select “1” in the Number of Units field, then only the Unit 1 Address field will appear and the other three Unit Address fields will be hidden. If you select “2” in the Number of Units field, then the Unit 1 Address and Unit 2 Address field will appear and the Unit 3 Address and Unit 4 Address fields will remain hidden. If you select “3” in the Number of Units field, then the Unit 1 Address, Unit 2 Address, and Unit 3 Address fields will appears and Unit 4 Address field will be hidden. If you select “4” in the Number of Units field, then all four of the Unit Address fields will be visible. Is there anyone who could help me with this? I don't have any experience with coding. I tried Googling code and editing it to meet my needs, but so far I've been unsuccessful. This is the code I was working with and trying to change for my needs, but it's not doing what I want it to. I don't know if this is a good place to start or if it's better to start from scratch.

<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='Number of Units']").change(function() {
        if ($("select[title='Number of Units']").val() != "1") {
            $('nobr:contains("Unit 1")').closest('tr').show();
            $('nobr:contains("Unit 2")').closest('tr').hide();
            $('nobr:contains("Unit 3")').closest('tr').hide();
            $('nobr:contains("Unit 4")').closest('tr').hide();
            $('nobr:contains("Unit 5")').closest('tr').hide();
            $('nobr:contains("Unit 6")').closest('tr').hide();
            $('nobr:contains("Unit 7")').closest('tr').hide();
            $('nobr:contains("Unit 8")').closest('tr').hide();
        } else
        if ($("select[title='Number of Units']").val() != "2") {
            $('nobr:contains("Unit 1")').closest('tr').show();
            $('nobr:contains("Unit 2")').closest('tr').show();
            $('nobr:contains("Unit 3")').closest('tr').hide();
            $('nobr:contains("Unit 4")').closest('tr').hide();
            $('nobr:contains("Unit 5")').closest('tr').hide();
            $('nobr:contains("Unit 6")').closest('tr').hide();
            $('nobr:contains("Unit 7")').closest('tr').hide();
            $('nobr:contains("Unit 8")').closest('tr').hide();
        }
    });
});
</script>
Improve this question

1 Answer 1

Reset to default
0

Change your .val() != test to be a ==.

You're saying with your current code: "If Value is not equal to 1, show 1 and hide the rest". Not quite what you need.

And you can neaten it up a bit with a switch:

    $(document).ready(function(){ 
//Show/hide columns based on Drop Down Selection 
$("select[title='Number of Units']").change(function() {
  switch($(this).val()) { 
    case "1": {

     $('nobr:contains("Unit 1")').closest('tr').show(); 
     $('nobr:contains("Unit 2")').closest('tr').hide(); 
     $('nobr:contains("Unit 3")').closest('tr').hide(); 
     $('nobr:contains("Unit 4")').closest('tr').hide(); 
     $('nobr:contains("Unit 5")').closest('tr').hide(); 
     $('nobr:contains("Unit 6")').closest('tr').hide(); 
     $('nobr:contains("Unit 7")').closest('tr').hide(); 
     $('nobr:contains("Unit 8")').closest('tr').hide(); 
     break;
    } 
     case "2": { 
       $('nobr:contains("Unit 1")').closest('tr').show(); 
       $('nobr:contains("Unit 2")').closest('tr').show(); 
       $('nobr:contains("Unit 3")').closest('tr').hide(); 
       $('nobr:contains("Unit 4")').closest('tr').hide(); 
       $('nobr:contains("Unit 5")').closest('tr').hide(); 
       $('nobr:contains("Unit 6")').closest('tr').hide(); 
       $('nobr:contains("Unit 7")').closest('tr').hide(); 
       $('nobr:contains("Unit 8")').closest('tr').hide(); 
       break;
} 
} // end switch
}); // end change
}); // end document ready
Improve this answer
2
  • Spot on with the wrong comparison. On another note, though, you probably never need to explicitly show the Unit 1 row. All rows are going to be shown at first, but there isn't an option of zero units, so the Unit 1 row should logically never be hidden, therefore you never have to show() it.
    – Dylan Cristy
    May 31, 2018 at 16:12
  • Very true, that would shorten it up a bit. I tend to like patterns that I can see at an immediate glance. In a year from now when someone's looking at the code, they won't have to think through 'why didn't they mention Unit 1? Oh yeah, because....' But that's a personal quirk of mine.
    – Robin in Or
    May 31, 2018 at 17:34

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.