Thursday, 3 November 2011

Show/Hide Columns Based on Drop Down Selection

We may need to show or Hide the columns based on some actions like selection of data from drop down. We can achieve this using a jquery.

Update the inputs below..





























<script src="URL to your jQuery-1.3.2.js file" type=text/javascript></script>
  
<script type="text/javascript">
  
// Execute the following JavaScript after the page has fully loaded, when it's ".ready"
$(document).ready(function(){
  
//Define which columns to show/hide by default
  $('nobr:contains("Display Name of Column to hide")').closest('tr').hide();
  $('nobr:contains("Display Name of Column to hide")').closest('tr').show();
  
//Show/hide columns based on Drop Down Selection 
 $("select[title='Display Name of Drop Down Column']").change(function() {
  if ($("select[title='Display Name of Drop Down Column']").val() == "Drop Down Selection 1") {
  $('nobr:contains("Display Name of Column to hide")').closest('tr').hide();
  $('nobr:contains("Display Name of Column to show")').closest('tr').show();
  } else if($("select[title='Display Name of Drop Down Column']").val() == "Drop Down Selection 2"){
  $('nobr:contains("Display Name of Column to hide")').closest('tr').hide();
  $('nobr:contains("Display Name of Column to show")').closest('tr').show();
  }
 });
});
</script>

12 comments:

  1. To clarify...

    1-save the code (line 2-end) somewhere accessible on the network
    2-add a content editor web part to the top of my form
    3-add the first line of script that points to the location of the script i saved

    ReplyDelete
    Replies
    1. I figured it out and it's most fabulous!!!

      I didn't read the instructions clearly. I needed this jQuery on my network to make it work.
      http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js

      THANKS!

      Delete
    2. Except if you use it for editing the item, the previously hidden column isnt visible until you change the drop down again.

      Delete
  2. I'm trying to figure out how to modify this code for checkboxes instead of dropdowns. Help?

    ReplyDelete
  3. This works beautifully! Thank you!

    ReplyDelete
  4. Problem is with Code
    in begining quotations should end at ".js"

    ReplyDelete
  5. I'm trying to adapt this to use with multiple subsequent drop downs but can't get it to work properly. The second drop down only works if the 1st has a specific value selected but I want them to run independently. Any help?

    ReplyDelete
  6. We can also hide the fields by applying conditional rules in infopath form.

    ReplyDelete
  7. when i do .show(), my field becomes read-only and shows "undefined" as a value. i want it to be a text-field(as it is defined as one).

    ReplyDelete
  8. Is there a way to start the form off with just the dropdown and then add items based on drop down selection? The problem I have now is that if you don't start off with the full form the form does not dynamically size back up to it's original size. It stays the same small size as when it loaded with just the drop down field.

    ReplyDelete