Trigger showing fields after drop down menu selected

Question

Trigger showing fields after drop down menu selected

Sevil Red 101

Good day,

I have Sharepoint List Form. I have choice drop down field "Type". The "Type" field has values "Process", "Question", "Order"...
I must show or hide some form fields when the "Type" field is changing.

If I select "Process", I must show "Field A" and hide "Field B"
If I select "Question", I must show "Field B" and hide "Field A" and "Field C"
If I select "Order", I must show "Field E" and "Field F" and hide all another fields.

I found this topic [how-to-hideshow-fields-based-on-checkbox-selection-on-newformaspx-][2][][3]

But how does look like the code for dropdown menu?

$("input[Title='Department1']").bind('click',function() { 
  if($(this).is(':checked')) {

Would be grateful

Answer accepted by question author

0 additional answers

Your answer

Answer 1

Amos Wu-MSFT 4,131 Moderator

Code idea:After the drop-down box is changed, we display all the columns, and then hide the column according to the value of the drop-down box.code.txt

Test Result:

Tip:you need to change the title value in $("select[title='choice']) to your drop down column display name.

Sevil Red 101 Reputation points

2020-08-10T08:33:19.05+00:00

Thanks,
But I can't understand what is wrong in my script16629-code1.txt

My Code and my field in F12
Amos Wu-MSFT 4,131 Reputation points Moderator

2020-08-10T09:16:41.147+00:00

The part of code you shared is about the input element.The drop down element is select.
You could try the code I shared in attachment.
If you need further help,please share your full code.
Amos Wu-MSFT 4,131 Reputation points Moderator

2020-08-10T09:39:20.153+00:00

I modify your code to adapt to my environment,it works well.
Is it not running at all or the implementation function does not meet your needs?Could you describe the problems occurred in detail when the code runs?
Sevil Red 101 Reputation points

2020-08-10T09:44:13.293+00:00

The File "code1.txt" is your code. The fields "DocDesc" and "DocOrg" don't hide. It in the file "Code1.png"
My first code version looks like the attachment "Full Code .PNG" ! 16792-full-code.png

I use "select[id ^='DocType']" in both...
Amos Wu-MSFT 4,131 Reputation points Moderator

2020-08-10T09:49:34.24+00:00

The jQuery selector is not the key point. Different column types will affect the execution result of the code. Please show the html code of DocDesc column and DocOrg column and the type of them.
Sevil Red 101 Reputation points

2020-08-10T09:54:05.787+00:00
Now I use select[title='Document Type'
My steps:

Add the "Code2.txt" to NewForm by Script Editor.

Save NewForm changing

Click F12

Click "Add document". NewForm.aspx opens. No Console Errors.

I select some "Document Type": "Order", "Question", "Process".

No Console Errors. But the fields "DocDesc" and "DocOrg" don't hide like in Code2.txt logic

I can't understand why "Document Type" field changing doesn't hide this fields16745-code2.txt
Sevil Red 101 Reputation points

2020-08-10T12:28:37.47+00:00

I found the script problem. This script doesn't work

$('nobr:contains("DocDesc")').closest('td').hide(); $('nobr:contains("DocOrg")').closest('td').hide();

DocOrg is a field SPFieldMultiChoice
DocDesc is a field SPFieldNote - textarea
Amos Wu-MSFT 4,131 Reputation points Moderator

2020-08-11T07:33:22.277+00:00

Have you solved this issue?

Share via

Trigger showing fields after drop down menu selected

0 additional answers

Your answer