I am new to SharePoint forms in O365. I have a created a form which has cascading drop downs.

1) Country - A normal drop down field

2) State - A cascading drop down field linked to Country

3) City - A cascading drop down field linked to State

If the user selects a city named "XYZ" I want another field "Comments" hidden.

Using some online tutorials i learnt and executed the below code which works if its an independent drop down field. As my drop-down field "City" is linked to other drop-down this code is not working.

Any help on executing the correct code.

<script src="https://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
        //Show/hide columns based on Drop Down Selection
        $("select[title='City Required Field']").change(function() {
           if ($("select[title='City Required Field']").val() != "XYZ")
  • What do you mean by "As my drop-down field "City" is linked to other drop-down"? Can you please add the complete code? Have you written .change() for City for multiple times? Commented Jan 7, 2020 at 9:29
  • Dear Ganesh, I meant the field "City" is not a stand alone. The values in this drop down field keeps varying... e.g. Firstly user selects a vlaue from "Country" drop down, based on that selection, the value in the next dropdown "State" appear (i.e. if user selects India as Country - Kar, TN, AP appears as values in State Drop down) and Based on the State selected, values in City drop down field appears. For cascading drop down i have a different script written.
    – Srikanth
    Commented Jan 7, 2020 at 9:34
  • You can work with PowerApps to achieve your purpose Commented Jan 7, 2020 at 9:41
  • @Srikanth: Please check if the change mehtod of "City" dropdown is being called on change of "State" dropdown. ? Have you written the change method of State dropdown which will call the change method of City Commented Jan 7, 2020 at 9:41
  • @ Ankit. This is the code i have for cascading drop down
    – Srikanth
    Commented Jan 7, 2020 at 9:55

2 Answers 2


You can make use of id attribute of your City dropdown to call Change event. In this case, I assumed id as city.

$("#city").change(function() {
  • @ Mohammed. It's not exectuing
    – Srikanth
    Commented Jan 7, 2020 at 10:23
  • How can you inject that JS script to SharePoint form ? Commented Jan 7, 2020 at 10:47
  • @Srikanth I have modified the code from on change to change event which will be executable in your case. Commented Jan 7, 2020 at 11:21
  • @AIMENBOULAHIA there are various ways to inject JS in the form like SEWP or CEWP etc. can also be injected directly to the page. Commented Jan 7, 2020 at 11:24
  • 1
    @AIMENBOULAHIA if you explain your situation little more, I can be able to help you out with the situation but from what I understood, I can say doing customization, you can achieve showing/hiding the fields based on permission assigned to user Role. Commented Jan 7, 2020 at 11:53

I don't know how to achieve that using JS scripts, but I would like to share with you how to do it with PowerApps (which is really cool and even non-developers can achieve that)

Please refer to Mr Shane Young which i find him very professional guy, and here the link: PowerApps Cascading Dropdown , here you will find exactly what you want and more !

Good luck.

  • Thank you Aimen. But we dont have access to PowerApps and need to use JS
    – Srikanth
    Commented Jan 7, 2020 at 12:20

Your Answer

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

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