Hiding Columns based on Drop Down list Selection

Question

I have five columns in my SharePoint list:

1. Number of Units (dropdown - 1,2,3,4)
2. Unit 1 Address (single line text)
3. Unit 2 Address (single line text)
4. Unit 3 Address (single line text)
5. 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>

Answer 1

I would look into csr which allows you to render list fields/views anyway you want. You can rewrite the list code with conditional statements and html quite easily.

Answer 2

Hi Embot,

Thanks for posting in our forum. However, since your question is related to the customization in SharePoint Online, we kindly suggest you post it in our MSDN forum for professional help. It is the specific channel that handling customized related queries and issues.  

The following are some references that may be helpful:

How to hide/show choice columns based on a dropdown selection in Infopath

Show/Hide columns based on dropdown selection

Your understanding is highly appreciated.

Best Regards,

Zixuan