Dynamically change Choice column values

Question

I have two choice columns in my list - Category and Sub-category respectively.

Now, if I select a value from Category, the choice values in the Sub-Category should display only the values I prefer.

Can we do this using jquery? And possibly can we do this without using Cascading Look up fields?

Thanks.

score 4 · Answer 1 · answered Feb 06 '16 at 06:26

4

If you have pairing defined, you can use mapping method:

var map = new Object(); // or var map = {};
map[myKey1] = "subCat1,subCat2";
map[myKey2] = "subCat3,subCat4";

function get(k) {
    return map[k];
}

//Attach event with dropdown selector, of main category.

$("#categorySelectorId").change(function(){
  var subCategory = $("#subCategorySelectId");
  subCategory.find('option').remove().end(); // To clear previous items
  var mappedValue = get(this.value); // to get all mapped items
  var subCategories = mappedValue.split(',');
     $.each(subCategories, function() { // populate sub category items
       options.append($("<option />").val(this.text).text(this.text));
     });
});

answered Feb 06 '16 at 06:26

Ovais Khatri

320
1
8

Could you please tell me what is myKey1 and myKey2 here? – Dheeraj Feb 07 '16 at 11:47
it will be your Main category option. – Ovais Khatri Feb 08 '16 at 05:48
1

You will need to actually hardcode Main category options, and respective sub categories, because both choice columns are in same list and there is no mapping defined as per your structure – Ovais Khatri Feb 08 '16 at 05:49

Mohit Sikhwal · Accepted Answer · 2016-09-27T11:40:13.240

@Dheeraj try this code for dynamic dropdown binding

<script language="javascript" src="../SiteAssets/jquery-3.1.0.min.js" type="text/javascript"></script> 
<script language="javascript" src="../SiteAssets/jquery.SPServices-0.7.2.js" type="text/javascript">  </script> 
<script type="text/javascript">  
  $(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
    relationshipList: "SubCategory",
    relationshipListParentColumn: "Category",
    relationshipListChildColumn: "Title",    
    parentColumn: "Category",
    childColumn: "SubCategory",
    debug: true
  });
    });
</script>

Dynamically change Choice column values

2 Answers2