Show / Hide fields based on choice field selection using JQuery in SharePoint

In this article, I’ll explain How to

  • 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?
Hide Show columns in Custom List based on dropdown selection in New Form in SharePoint
Applies To
  • SharePoint 2016.
  • SharePoint 2013.
  • SharePoint 2010.


Steps

Create a Custom List.

  • Open the SharePoint Site > Site Settings > Click on Add an app.

Add an app

  • Click on a Custom List.customlist
  • Specify your custom list name > Click on Create.

create custom list

  • The custom list is created successfully.

new custom list added

  • At the above ribbon > List Tab >  Select List Settings.

list settings

  • Below Columns section > Click on Create column.

create column

  • Specify the column name > Select ‘Choice’ data type.

choice field

  • Type your choices and select Drop-Down Menu.

choice field 1

  • Again, Create a new column with a ‘Single line of text’.

single line of text field

  • Now you should have two columns as shown below.

columns

Show / Hide fields based on Choice field selection in New Form.

  • In ‘All items’ Page, > From the above ribbon, > In ‘Customize List’ Section > Click on ‘Form Web Parts’ > Select Default New Form.

Form web Parts

  • The ‘New Form‘ will be opened in ‘Edit Mode‘ > Click on ‘Add a Web Part‘.

add new webpart

  • Inside Media and Content > Script Editor > Click on Add.

noteIn Sharepoint 2010, There is no a Script Editor web part, you should follow the same below steps by using Content Editor Web Part.

add script editor.PNG

  • Click on EDIT SNIPPET.

edit snippet

  • Add the following code.
<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='City']").change(function() {
if ($("select[title='City']").val() != "other")
{
$('nobr:contains("OtherCity")').closest('tr').hide();
}
else
{
$('nobr:contains("OtherCity")').closest('tr').show();
}
});
});
</script>

noteReplace the choice field name ‘City’ at $("select[title='City']").change(function() {
if ($("select[title='City']").val() != "other") with your columns name.

Replace the field name ‘OtherCity’ that you need to hide or show at $('nobr:contains("OtherCity")').closest('tr').hide();with your field name.

hint-iconYou 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.

edit script editor

  • In the above ribbon > Page Tab > Click on Stop Editing.

stop editing

  • Go back to test your code and Click on Add New Item.
  • The ‘othercity’ field should be shown in a case of the ‘other’ option is selected from “City” drop-down field.

other city selected

  • Select any value else ‘other’ where the ‘OtherCity’ field will be hidden.

Hide Show columns in Custom List based on dropdown selection in New Form in SharePoint

You can also show hide another drop-down field based on a drop-down selection with the same code.

Hide Show columns in Custom List based on dropdown selection


Show / Hide fields based on a drop-down selection in Edit Form.

  • In ‘All items’ Page, > From the above ribbon, > In ‘Customize List’ Section > Click on ‘Form Web Parts’ > Select Default Edit Form.

Form web Parts

  • The ‘Edit Form‘ will be opened in ‘Edit Mode‘ > Click on ‘Add a Web Part‘.

add new webpart

  • Inside Media and Content > Script Editor > Click on Add. (Note: in SharePoint 2010 there is only Content Editor).

add script editor

  • Click on EDIT SNIPPET.

edit snippet

  • Add the following code.
<script src="https://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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();
}
});
});
</script>

noteReplace the choice field name ‘City’ at $("select[title='City']").change(function() {
if ($("select[title='City']").val() != "other") with your columns name.

Replace the field name ‘OtherCity’ that you need to hide or show at $('nobr:contains("OtherCity")').closest('tr').hide();with your field name.

hint-iconYou 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.

edit script editor

  • At the above ribbon,> Click on Stop Editing.

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

Hide Show columns in Custom List based on dropdown selection in Edit Form in SharePoint


Show / Hide fields based on Choice field selection Display Form

  • In ‘All items’ Page, > From the above ribbon, > In ‘Customize List’ Section > Click on ‘Form Web Parts’ > Select Default Edit Form.

Form web Parts

  • The ‘Display Form‘ will be opened in ‘Edit Mode‘ > Add a Web Part > Media and Content > Script Editor.
  • Add the below code.
<script src="https://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//viewitem
$(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();
}
});
</script>

noteReplace 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”.

viewitem1

  • In a case of ‘City’ is “other”. so that, the “OtherCity” should be shown.

Hide Show columns in Custom List based on dropdown selection in Display Form in SharePoint


See also

Show / Hide fields based on a drop down field using SPUtility.js

Advertisements

48 thoughts on “Show / Hide fields based on choice field selection using JQuery in SharePoint

  1. Great article. Question: how would your code in the Edit form look if you wanted to display the OtherCity text field if more than one choice field was selected. For example if you had the following choice fields…Cairo, New York, Los Angeles and Other. And we wanted to display the OtherCity text field if New York was selected or if Other was selected the text field would be displayed. However if the choice field was blank, Cairo or Los Angeles it will still not be displayed. Thanks

    Like

    1. Sorry for delay 😦 if you need to show other city text box based on a selection raher than other as New Yourk, you just need to use or || in this condition if ($(“select[title=’City’]”).val() != “other” || $(“select[title=’City’]”).val() != “New York” )

      Please don’t hesitate to tell me if you need any clarification 🙂

      Like

      1. Hi Mohamed,
        I tried this and it is not working for me.With one choice it works fine but with two it is not. Could you please advice? Please see my code below.
        https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

        $(document).ready(function(){
        //Show/hide columns based on Choice Field Selection
        $(“select[title=’Reason on Site’]”).change(function() {
        if ($(“select[title=’Reason on Site’]”).val() != “Contractor” || $(“select[title=’Reason on Site’]”).val() != “Visitor” )
        {
        $(‘nobr:contains(“Line Manager”)’).closest(‘tr’).show();
        }
        else
        {
        $(‘nobr:contains(“Line Manager”)’).closest(‘tr’).hide();
        }
        });
        });

        Thanks in Advance.
        Mithu Mary

        Like

      2. Hi, Just repeat the above code for the second Choice field as the following:
        //Choice 1
        $(“select[title=’Choice1’]”).change(function() {
        if ($(“select[title=’Reason on Site’]”).val() != “Contractor” || $(“select[title=’Reason on Site’]”).val() != “Visitor” )
        {
        $(‘nobr:contains(“Line Manager”)’).closest(‘tr’).show();
        }
        else
        {
        $(‘nobr:contains(“Line Manager”)’).closest(‘tr’).hide();
        }
        });
        //Choice 2
        $(“select[title=’Choice2’]”).change(function() {
        if ($(“select[title=’Reason on Site’]”).val() != “Contractor” || $(“select[title=’Reason on Site’]”).val() != “Visitor” )
        {
        $(‘nobr:contains(“Line Manager”)’).closest(‘tr’).show();
        }
        else
        {
        $(‘nobr:contains(“Line Manager”)’).closest(‘tr’).hide();
        }
        });

        Like

      3. Hi Mohamed,

        Thank you very much for the quick reply. I couldn’t find comment on your below reply so posting here.
        I think I dint explain you my problem correctly. I have a choice field ‘Reason on site’, which has five choices. I want the form to hide next list field ‘Line Manager’ if user opts choices ‘Visitor’ or ‘Contractor’.
        I found what I was doing wrong, I changed || to && and it is working perfect for me.
        Thank you very much for your detailed article.

        https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

        $(document).ready(function(){
        //Show/hide columns based on Choice Field Selection
        $(“select[title=’Reason on Site’]”).change(function() {
        if (($(“select[title=’Reason on Site’]”).val() != “Contractor”) && ($(“select[title=’Reason on Site’]”).val() != “Visitor”))
        {
        $(‘nobr:contains(“Line Manager”)’).closest(‘tr’).show();
        }
        else
        {
        $(‘nobr:contains(“Line Manager”)’).closest(‘tr’).hide();
        }
        });
        });

        Thanks
        Mithu Mary

        Like

  2. What do you have to change with the code if the control field is just a currency field and not a choice field?

    Like

  3. Hello. Thanks for this, I got the New item to work. My question is if I want the field to be hidden until a selection is made in the previous list element? For instance I have an Other Filings. I want Other Description to only show when “Other” is selected from that drop down. Right now, it shows until I make a selection. Thanks in advance for your time!

    Like

  4. Thank you so much for this. After scouring google for any hint at accomplishing this, I got lucky enough to find this blog entry.

    It’s important to note that Chrome and IE will block the jquery script from running without you specifically authorizing untrusted sources because it has http instead of https. To fix this, simply change “http://code.jquery.com/jquery-1.7.2.min.js” into “https://code.jquery.com/jquery-1.7.2.min.js”

    Like

  5. Hi Mohamed,
    Your post is very much helpful. thank you for the wonderful post.
    I followed the instructions and was able to make it work for “default new form” and “default display form”. However, when I try for “default edit form”, it is not working. Can you please help me to fix it?
    Once this is successful, I would like to implement this on the actual form which is bit lengthy but I hope it works. Request you to please help me on making the edit form work. Thank you!

    Like

  6. Hi Mohamed,
    Please disregard my previous comment. My bad. I had typed the column name in lower case while it should have been upper case. My colleague helped me identify it and it worked well. Great Article. Helped me a lot. Now, I will use this on my actual form and try.

    Like

  7. Hello from Canada. I’m pretty new to SharePoint and I’m working on a French-Canadian 2016 Online site. I tried your tutorial, but it does not work. Maybe it’s because I have to use ‘the New Experience’ ? I heard it does not have anymore. How can I get around that problem? Or maybe because my field has accents? How Javascript deal with accents? Thank you in advance for your time…

    Like

  8. Hi Mohamed,

    really great tutorial! I am relatively new to SharePoint and I’ve been looking for something like this for quite some time now. Thank you very much! 🙂

    I used your first two tutorials to adjust my “edit form” and “new form” and it worked like a charm! But if I edit the “display form” nothing happens. These are the steppes I took:

    I entered the display form of a random item
    I entered edit mode.
    I added a web part –> script editor.
    I entered the following code in the script editor:

    https://code.jquery.com/jquery-1.7.2.min.js

    //viewitem
    $(document).ready(function(){
    if ($(‘h3:contains(“Column1”)’).closest(‘td’).next(‘td’).text()
    .indexOf(‘Choice1’) == -1)
    {
    $(‘h3:contains(“Column2”)’).closest(‘tr’).hide();
    }
    else
    {
    $(‘h3:contains(“Column2”)’).closest(‘tr’).show();
    }
    });

    My goal is to hide “colum2” in the display form if the choice is NOT “choice1”.

    What am I doing wrong?

    Thank you very much for your help! 🙂

    Jannis

    Like

  9. Awesome tutorial!
    I am running into an issue that I cannot seem to find a solution.
    I have a drop down in a Newform.aspx that contains multiple choices ( ex ample CHoice 1, Choice 2, Choice 3, Choice 4,).
    The functionality I am trying to attain is as follows :
    User picks Choice 1 from the drop down, question 1 & question 2 appear.
    User picks Choice 2 from the drop down, question 3 & question 4 appear.

    The Problem

    Using the tutorial The user can choose choice 1 and Question 1 & 2 appear
    But when the User chooses Choice 2 nothing happens

    My default code is below :https://code.jquery.com/jquery-1.7.2.min.js

    $(document).ready(function(){
    //Show/hide columns based on Drop Down Selection
    $(“select[title=’Choices’]”).change(function() {
    if (($(“select[title=’Choices’]”).val() != “Choice 1”) && ($(“select[title=’Choices’]”).val() != “Choice 2”))
    {
    $(‘nobr:contains(“Question 1”)’).closest(‘tr’).show();
    $(‘nobr:contains(“Question 2”)’).closest(‘tr’).show();

    }
    else
    {
    $(‘nobr:contains(“Question 1”)’).closest(‘tr’).hide();
    $(‘nobr:contains(“Question 2”)’).closest(‘tr’).hide();

    }
    });
    });

    When I attempted to add the code for Choice 2 my. The Script did not work.
    The above code is the code after I stripped out my choice 2 coding.
    Can you please advise where and what to add so that users can chose Choice 2 and questions 3 and 4 will appear?

    Thank you in Advance

    Like

    1. I figured it out.
      I just encased all my if-else statements individually and made sure i had the correct amount of brackets ( so many simple mistakes ha ha, but it works now HA)

      Like

  10. Love this page thank you so much!
    But I don’t get it to work. When I put in the script exactly like your example it doesn’t work. Both the fields are showing. What am I doing wrong?

    Like

  11. Hi Mohamed,

    This is a great tutorial, thanks!

    Hoping you can help me with a problem I’ve been encountering though – I’ve been trying to apply this code to an existing list with existing fields and it seems that it will only work when I create a new dropdown field. I did this, updated all the existing list items with the new dropdown and it was all working. However when I went to edit the code slightly it’s now stopped working across new, edit and display forms (even though I only touched the new form webpart and have now changed it back to the original code). I think this is because the new dropdown field I created to make the code work is now in use, but I don’t want to have to create another new dropdown field and transfer the information over to get it to work again. Is there a way around this so I don’t have to recreate the dropdown field every time I want to edit the code? What could I be doing wrong?

    Thanks in advance 🙂

    Like

  12. I have used the same procedure like that of you but mine is not working. What do you think is the problem. Below is my code:

    https://code.jquery.com/jquery-1.7.2.min.js

    $(document).ready(function(){

    $(‘nobr:contains(“Location of Travel”)’).closest(‘tr’).hide();
    $(‘nobr:contains(“Title”)’).closest(‘tr’).hide();

    $(“select[title=’TypeofSettlement’]”).change(function() {

    if ($(“select[title=’TypeofSettlement’]”).val() != “Travel”)
    {
    $(‘nobr:contains(“Location of Travel”)’).closest(‘tr’).hide();
    }
    else
    {
    $(‘nobr:contains(“Location of Travel”)’).closest(‘tr’).show();

    }
    });
    });

    Like

  13. Hello there Mohamed,

    I’ve been using your script and made it to my scenario. The only problem I am having now is that I have to reselect an option before the script is doing its job. The columns that should be hidden are showed untill I reselect the right ”Category”.

    For instance: I want a set of columns be hidden untill a specific option is chosen. but the colums are by default showed untill the right option is reselected then they are hidden.

    Like

      1. I was having the issue with the hidden field being shown by default on page load. I have found this solution to hide on page load until the selection is made. You would just need to update the below sample with your own values for “YourFieldName1, YourFieldName2, and YourSelectionValue”. I hope it works for you as well.

        https://code.jquery.com/jquery-1.7.2.min.js

        $(document).ready(function(){
        //Show/hide columns based on Drop Down Selection on page load
        ShowHideFields();
        $(“select[title=’YourFieldName1′]”).change(function() {
        ShowHideFields();//only runs on dropdown change
        });
        });

        function ShowHideFields() {
        if ($(“select[title=’YourFieldName1′]”).val() != “YourSelectionValue”)
        {
        $(‘nobr:contains(“YourFieldName2”)’).closest(‘tr’).hide();
        }
        else
        {
        $(‘nobr:contains(“YourFieldName2”)’).closest(‘tr’).show();
        }
        }

        Like

  14. Hi, I don’t see the add webpart option here:

    •In ‘All items’ Page, > From the above ribbon, > In ‘Customize List’ Section > Click on ‘Form Web Parts’ > Select Default New Form.

    Instead I go to edit page-> add webpart

    But, it does not work. I have set it to “classic experience” also.

    Liked by 1 person

  15. Thanks Mohammad. It really very helpful. I want to know is it possible when site load the “Othercity” will not visible. I mean “Other City” by defauly would be hidden form , once selection done for “city” then only it should visible.

    Thanks,
    TS

    Like

  16. This has worked great for me for several things but recently I’ve had two instances where when I add this more than once on the same new form, everything disappears so I cannot edit it. So when I go to Form Web Parts then Default new form to make changes, it shows for a brief second and then everything disappear leaving me a blank page. What could be causing this?

    Like

  17. Hi Mohamed,

    Thank you so much for this tutorial.

    I just got a quick question regarding this. When i use your code on the standard sharepoint 2010, it works perfectly, however, when i use Nintex form to make my form more suited i.e. add company logo, the codes no longer work.

    Any assistance will be greatly appreciated.

    Aindreas

    Like

  18. Mohamed –
    Thank you – this an excellent tutorial. I was able to successfully hide/show 1 column using a choice column, but I was not able to hide/show more than 1 column using a choice column. I am sure it is how I’ve edited the code, but I can’t see where my mistake is.

    My choice column is titled: Does the customer require their name, address and tax ID on the certificate:

    If the user selects: Yes, I would like for 3 columns to be shown.
    1st column I would like to hide/show is titled: Customer Name to appear on certificate:
    2nd column I would like to hide/show is titled: Customer Address to appear on certificate:
    3rd column I would like to hide/show is titled: Customer Tax ID to appear on certificate:

    This is the code I’ve inserted into the Script Editor:
    https://code.jquery.com/jquery-1.7.2.min.js

    $(document).ready(function(){
    if ($(“select[title=’Does the customer require their name, address and tax ID on the certificate:’]”).val() != “Yes”)
    {
    $(‘nobr:contains(“Customer Name to appear on certificate:”)’).closest(‘tr’).hide();
    $(‘nobr:contains(“Customer Address to appear on certificate:”)’).closest(‘tr’).hide();
    $(‘nobr:contains(“Customer Tax ID to appear on certificate:”)’).closest(‘tr’).hide();
    }
    else
    {
    $(‘nobr:contains(“Customer Name to appear on certificate:”)’).closest(‘tr’).show();
    $(‘nobr:contains(“Customer Address to appear on certificate:”)’).closest(‘tr’).show();}
    $(‘nobr:contains(“Customer Tax ID to appear on certificate:”)’).closest(‘tr’).show();}
    }

    //Show/hide columns based on Drop Down Selection
    $(“select[title=’Does the customer require their name, address and tax ID on the certificate:’]”).change(function() {
    if ($(“select[title=’Does the customer require their name, address and tax ID on the certificate:’]”).val() != “Yes”)
    {
    $(‘nobr:contains(“Customer Name to appear on certificate:”)’).closest(‘tr’).hide();
    $(‘nobr:contains(“Customer Address to appear on certificate:”)’).closest(‘tr’).hide();
    $(‘nobr:contains(“Customer Tax ID to appear on certificate:”)’).closest(‘tr’).hide();
    }
    else
    {
    $(‘nobr:contains(“Customer Name to appear on certificate:”)’).closest(‘tr’).show();
    $(‘nobr:contains(“Customer Address to appear on certificate:”)’).closest(‘tr’).show();}
    $(‘nobr:contains(“Customer Tax ID to appear on certificate:”)’).closest(‘tr’).show();}
    }
    });
    });

    Like

      1. Thanks Mohamed. Meaning the column names are too long/complex or the way I’ve written the titles into the code is the issue?

        Like

  19. I’m having trouble applying the “Edit” code when trying to add two options… the dropdown is yes or no. I want it to display certain fields when “yes” is selected and a different field when “no” is selected. How do you write that code? TIA!

    Like

  20. Same issue here.. I tried to recreate the sample from New Form to Display Form. New Form and Edit Form works perfectly as how it was shown above, but in Display Form it doesn’t give me the same output.

    Hope you can all help. Thank you!

    Like

  21. Mohamed, this article is great!
    Would your code change any if you Require that the column contains information? Mine was working until I changed the require field and didn’t see anything reference above about this topic.

    Thanks for your help

    Like

  22. Hi Mohammed, this is a great article – thank you! Ive been using it or some time now. However, now I’d like to show or hide a field based on the whether a check box has been ticked. I thought it would be straightforward but I cant get it to work. Can you help please?

    Like

  23. Hi Mohamed,

    This is exactly what I have been looking for, but I am having trouble getting the code to work. I am wondering if this is because I am using a custom New form I created with SP Designer, with the field names entered manually. For example:

                    <tr>
                        <td width="190px" valign="top" class="ms-formlabel">
                            <H3 class="ms-standardheader">
                                <nobr>Method of Delivery</nobr>
                            </H3>
                        </td>
                        <td width="400px" valign="top" class="ms-formbody">
                            <SharePoint:FormField runat="server" id="ff27{$Pos}" ControlMode="New" FieldName="Method_x0020_of_x0020_Delivery" __designer:bind="{ddwrt:DataBind('i',concat('ff27',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Method_x0020_of_x0020_Delivery')}"/>
                            <SharePoint:FieldDescription runat="server" id="ff27description{$Pos}" FieldName="Method_x0020_of_x0020_Delivery" ControlMode="New"/>
                        </td>
                    </tr>
    

    Have you tried this with a custom form, and could the problem be in the code closest(tr). Here is my code:

    https://code.jquery.com/jquery-1.7.2.min.js

    $(document).ready(function(){
    //Show/hide columns based on Drop Down Selection
    $(“select[title=’Method of Delivery’]”).change(function() {
    if ($(“select[title=’Method of Delivery’]”).val() != “Hand-Carried”)
    {
    $(‘nobr:contains(“Receiver’s Name”)’).closest(‘tr’).hide();
    }
    else
    {
    $(‘nobr:contains(“Receiver’s Name”)’).closest(‘tr’).show();
    }
    });
    });

    Thanks Mohamed

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s