In this article, we’ll explain How to “Show / Hide fields based on choice field selection using JQuery in SharePoint 2016 / 2013“.
We’ll also learn how to
Applies To
- SharePoint 2016.
- SharePoint 2013.
- SharePoint 2010.
You might also like to read SharePoint Auto Populate Column based on another Column.
In this section, we’ll learn
- Show and hide a column based on Choice field / Drop-down selection in New Form?
- Show and hide a column based on Choice field / Drop-down selection in Edit Form?
- Show and hide a column based on Choice field / Drop-down selection in Display Form?
Show / Hide fields based on choice field selection: Create a Custom List.
Steps
- Open the SharePoint Site > Site Settings > Click on Add an app.
- Click on a Custom List.
- Specify your custom list name > Click on Create.
- The custom list is created successfully.
- At the above ribbon > List Tab > Select List Settings.
- Below Columns section > Click on Create column.
- Specify the column name > Select ‘Choice’ data type.
- Type your choices and select Drop-Down Menu.
- Again, Create a new column with a ‘Single line of text’.
- Now you should have two columns as shown below.
Show / Hide fields based on Choice field selection in New Form
In this section, we’ll explain how to show and hide fields based on Choice field selection in SharePoint List New Form by following the below steps:
Steps
- In ‘All items’ Page, > From the above ribbon, > In ‘Customize List’ Section > Click on ‘Form Web Parts’ > Select Default New Form.
- The ‘New Form‘ will be opened in ‘Edit Mode‘ > Click on ‘Add a Web Part‘.
- Inside Media and Content > Script Editor > Click on Add.
In SharePoint 2010, There is no a Script Editor web part, you should follow the same below steps by using Content Editor Web Part.
- Click on EDIT SNIPPET.
- Add the following code.
$(document).ready(function() {
//Show/hide columns based on Drop Down Selection
$("select[title='City']").change(function() {
if ($("select[title='City']").val() != "other") {
$('nobr: contains("OtherCity")').closest('tr').hide();
} else {
$('nobr: contains("OtherCity")').closest('tr').show();
}
});
});Download the full code for New Form on GitHub at Show / Hide fields based on choice field selection in SharePoint
What you should change in your side, to get this code working
- Replace the choice field name ‘City’ at
$("select[title='City']").change(function() {if ($("select[title='City']").val() != "other")with your column name. - Replace the field name ‘OtherCity’ that you need to hide or show at
$('nobr:contains("OtherCity")').closest('tr').hide();with your field name.
You can Show and Hide multiple fields by repeating the code with your second field name in IF-Else block as shown below:
if ($("select[title='City']").val() != "other") {
$('nobr:contains("OtherCity")').closest('tr').hide();
$('nobr:contains("Field2")').closest('tr').hide();
} else {
$('nobr:contains("OtherCity")').closest('tr').show();
$('nobr:contains("Field2")').closest('tr').show();
}- Click on Insert.
- In the above ribbon > Page Tab > Click on Stop Editing.
- Go back to test your code and click on Add New Item.
- The ‘other city’ field should be shown in a case of the ‘other’ option is selected from “City” drop-down field.
- Select any value else ‘other’ where the ‘OtherCity’ field will be hidden.
You can also show hide another drop-down field based on a drop-down selection with the same code.
Note: if you have many columns, it will lead to having a long and complex code with many if/else conditions, in this case, you should use this workaround as mentioned at Show and Hide columns based on choice selection in SharePoint 2016
Show / Hide fields based on a lookup selection in Edit Form
In this section, we’ll explain how to show and hide fields based on Choice field selection in SharePoint List Edit Form by following the below steps:
Steps
- In ‘All items’ Page, > From the above ribbon, > In ‘Customize List’ Section > Click on ‘Form Web Parts’ > Select Default Edit Form.
- The ‘Edit Form‘ will be opened in ‘Edit Mode‘ > Click on ‘Add a Web Part‘.
- Inside Media and Content > Script Editor > Click on Add. (Note: in SharePoint 2010 there is only Content Editor).
- Click on EDIT SNIPPET.
- Add the following code.
$(document).ready(function() {
if ($("select[title=’City’]").val() != "other") {
$('nobr: contains("OtherCity")').closest('tr').hide();
} else {
$('nobr: contains("OtherCity")').closest('tr').show();
}
//Show/hide columns based on Drop Down Selection
$("select[title=’City’]").change(function() {
if ($("select[title='City']").val() != "other") {
$('nobr: contains("OtherCity")').closest('tr').hide();
} else {
$('nobr: contains("OtherCity")').closest('tr').show();
}
});
}); Download the full code for Edit form on GitHub at Show / Hide fields based on choice field selection in SharePoint
What you should change in your side, to get this code working
- Replace the choice field name ‘City’ at
$("select[title='City']").change(function() {if ($("select[title='City']").val() != "other")with your column name. - Replace the field name ‘OtherCity’ that you need to hide or show at
$('nobr:contains("OtherCity")').closest('tr').hide();with your field name.
You can Show / Hide multiple fields by repeating the code with your second field name in IF-Else block as shown below
if ($("select[title='City']").val() != "other") {
$('nobr:contains("OtherCity")').closest('tr').hide();
$('nobr:contains("Field2")').closest('tr').hide();
} else {
$('nobr:contains("OtherCity")').closest('tr').show();
$('nobr:contains("Field2")').closest('tr').show();
}- Click on Insert.
- At the above ribbon,> Click on Stop Editing.
- Go back to test your code and Click on Edit Item.where “OtherCity” field should be hidden in a case of the selected city was not “other” option
You might also like to read Auto Populate Field Values based on Lookup Selection In SharePoint.
Show / Hide fields based on Choice field selection in Display Form
In this section, we’ll explain how to show and hide fields based on Choice field selection in SharePoint List Display Form by following the below steps:
Steps
- In ‘All items’ Page, > From the above ribbon,
- In ‘Customize List’ Section > Click on ‘Form Web Parts’ > Select Default Edit Form.
- The ‘Display Form‘ will be opened in ‘Edit Mode‘ > Add a Web Part > Media and Content > Script Editor.
- Add the below code.
$(document).ready(function() {
if ($('h3: contains("City")').closest('td').next('td').text()
.indexOf(‘other’) == -1) {
$('h3: contains("OtherCity")').closest('tr').hide();
} else {
$('h3: contains("OtherCity")').closest('tr').show();
}
}); Replace the choice field name ‘City’ at if condition
$('h3:contains("City")').closest('td').next('td').text()with your columns name.
- Open Display form, the ‘OtherCity’ field should be hidden if the selected city was not “other”.
- In a case of ‘City’ is “other”. so that, the “OtherCity” should be shown.
Download the full code for Display Form on GitHub at Show / Hide fields based on choice field selection in SharePoint
Conclusion
In conclusion, we have learned how to How to “Show / Hide fields based on choice field selection using JQuery in SharePoint 2016 / 2013“.
We have also learned, how to show and hide a column based on Choice field selection in SharePoint using JQuery for
- SharePoint List New Form.
- SharePoint List Edit Form.
- SharePoint List Display Form.
Download
Download the full code from GitHub at Show / Hide fields based on choice field selection in SharePoint, also Please, don’t forget to Follow Me to get the latest updates.
You might also like to read
- Show / Hide fields based on a drop-down field using SPUtility.js
- SharePoint Auto Populate Column based on another Column
- Disable SharePoint Field Using JQuery
- Disable Choice Field On Edit Form in SharePoint 2016
- Show and Hide Columns in SharePoint List Forms Using PowerShell
Have a Question?
If you have any related questions, please don’t hesitate to ask it at deBUG.to Community.
My code does not seem to work when I make the drop-down field mandatory. How do you handle a mandatory field? I tried change the code as shown below, but no luck.
$(document).ready(function(){
$(‘nobr:contains(“Risk Strategy”)’).closest(‘tr’).hide();
//Show/hide columns based on Drop Down Selection
$(“select[title=’Type *’]”).change(function() {
if ($(“select[title=’Type *’]”).val() != “Risk”)
{
$(‘nobr:contains(“Risk Strategy”)’).closest(‘tr’).hide();
}
else
{
$(‘nobr:contains(“Risk Strategy”)’).closest(‘tr’).show();
}
});
Try to get the display name of this field using F12 and add it instead “Risk Strategy”
Thanks… but when I make the ‘Type’ drop-down field mandatory, the ‘Risk Strategy’ field does not appear when I select ‘Risk’ from the drop-down. This code works when I remove the asterisk from ‘Type’ and make the field ‘Type’ non-mandatory. I’d like to maintain that integrity.
I will check it on my side!, and please, don’t forget to add your question at BUZZ to get more answers https://buzz.devoworx.net/
’Type *’ wont work because that is not the name of the field. When the field is not mandatory, ‘Title’ is the name of the field. However, when you make a field mandatory, SharePoint changes the name of the field to ’Type Required Field’. (Thanks SP developers – not). So try
$(“select[title=’Type Required Field’]”).change(function() {
Hi Mohamed – have you created a solution in O365 Sharepoint? Or will this work with Classic Experience? I’m in the process of migrating old InfoPath forms from our on-premise Sharepoint to O365 and in getting rid of InfoPath, much of the show/hide functionality is gone.
It would work in classic experience!
Hi Mohamed,
I am trying to create something like you listed but my list is more complicated and I can not find a way to make it works. I have a column called “Responsible By” and it has two choices (Supplier and Work Center). I have over 200 suppliers and 100 Work Center. if I select one or the other, how do I make only the choice I selected show up for selection? Please advise!
Pingback: Set Rich Multiple Line Text Field as Read Only in SharePoint - ITCore
Pingback: Disable Choice Field in SharePoint Froms - IT Core