Set select options dynamically in catalog product page in Magento Admin panel

Question

Need to have a dynamic set of values in an select attibute, depending upon another select attribute.

e.g. there will be two dropdown attributes 1. parent dropdown, 2. child dropdown

if "A" is selected in parent dropdown then "Air","Apple","Ant" will be shown in dropdown.

if "B" is selected in parent attribute then "Ball", "Box", "Base" will be shown.

So basically values of child dropdown will be depended upon the selected value of parent dropdown.

I want to make it dynamic as options can be saved under attributes and those values are to shown in Catalog Product Edit page.

Thanks in advance.

Answer 1

try the below code if you have data inside select box in object or array in JS then you can filter it out easily and append it to select box Here's Demo DEMO

var data = {
  "A": ["Air", "Apple", "Ant"],
  "B": ["Water", "Mango", "Fly"]
}

jQuery('#parent').on('change', function() {
  var tempData = data[this.value];
  var selectChild = jQuery('#child');
  jQuery('option', selectChild).remove();
  for (var i = 0; i < tempData.length; i++) {
    var option = new Option(tempData[i], tempData[i]);
    selectChild.append(jQuery(option));
  }

});

<select id="parent">
  <option value="">Select Parent</option>
  <option value="A">A</option>
  <option value="B">B</option>
</select>
<select id="child">
  <option value="">Select Child</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>