json动态联动表单

// 假设有以下 JSON 定义的联动规则
const jsonRule = {
  "fields": [
    {
      "name": "category",
      "type": "select",
      "options": [
        {"value": "fruit", "label": "水果"},
        {"value": "vegetable", "label": "蔬菜"}
      ]
    },
    {
      "name": "item",
      "type": "select",
      "options": []
    }
  ],
  "relations": [
    {
      "sourceField": "category",
      "targetField": "item",
      "rule": {
        "fruit": [
          {"value": "apple", "label": "苹果"},
          {"value": "banana", "label": "香蕉"}
        ],
        "vegetable": [
          {"value": "carrot", "label": "胡萝卜"},
          {"value": "cabbage", "label": "卷心菜"}
        ]
      }
    }
  ]
};

// 监听 category 字段的变化
document.querySelector('[name="category"]').addEventListener('change', function() {
  const selectedCategory = this.value;
  const itemSelect = document.querySelector('[name="item"]');
  itemSelect.innerHTML = ''; // 清空选项

  const options = jsonRule.relations[0].rule[selectedCategory];
  options.forEach(option => {
    const optionElement = document.createElement('option');
    optionElement.value = option.value;
    optionElement.textContent = option.label;
    itemSelect.appendChild(optionElement);
  });
});