Wednesday 12 June 2013

Show/Hide Columns based on dropdown selection

Code:- Add this code in list dispform.aspx as a content editor webpart

<script src="/sites/Newsite1/SiteAssets/jquery-1.9.0.min.js" 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("fld1")').closest('tr').hide();
 $('nobr:contains("fld2")').closest('tr').hide();
$('nobr:contains("fld3")').closest('tr').hide();

//Show/hide columns based on Drop Down Selection
$("select[title='dp3']").change(function() {
  if ($("select[title='dp3']").val() == "NO") {
  $('nobr:contains("fld3")').closest('tr').hide();
  } else if($("select[title='dp3']").val() == "YES"){
    $('nobr:contains("fld3")').closest('tr').show();
  }
 });
 $("select[title='dp1']").change(function() {
  if ($("select[title='dp1']").val() == "NO") {
  $('nobr:contains("fld1")').closest('tr').hide();
  } else if($("select[title='dp1']").val() == "YES"){
    $('nobr:contains("fld1")').closest('tr').show();
  }
 });
$("select[title='dp2']").change(function() {
  if ($("select[title='dp2']").val() == "NO") {
  $('nobr:contains("fld2")').closest('tr').hide();
  } else if($("select[title='dp2']").val() == "YES"){
    $('nobr:contains("fld2")').closest('tr').show();
  }
 });

});</script>


Default value for the dropdown is no.so currently fields are hided once you select the YES corresponding fields will be enable...






Reference URL:

No comments:

Post a Comment