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.

Answer 1

@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>

Answer 2

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));
     });
});