带有jquery的多个动态字段

Question

我有一系列的 div 或 input，所有的数据都是从一个 JSON 文件中拉出来的。

这是一个结构示例：group - groupItem - itemSpec- itemSpec2

{
    "Group": "groupA",       
    "Item": "groupA-item1",
    "Spec1": "item1-spec1",
    "Spec2": "item1-spec2"
    },
    {
    "Group": "groupB",       
    "Item": "groupB-item1",
    "Spec1": "groupB-item1-spec1",
    "Spec2": "groupB-Item1-spec2"
    },
    "Group": "groupA",       
    "Item": "groupA-item1",
    "Spec1": "groupA-Item1-spec1",
    "Spec2": "groupA-Item2-spec2"
    },

所以我可以有几个 groupA 或 groupB，并且有几个项目来自同一个组。

我尝试在第一个选择字段中提取所有组，并具有避免重复的功能

let dropdown = $('#group');
  let input1 = $('#item');
  let input2 = $('#spec1');
  let input3 = $('#spec2');


  dropdown.empty();
  dropdown.append('<option selected="true" class="reset">Choose a group</option>');
  const url = 'interaction.json';
  $.getJSON(url, function(data) {
    var ids = []; 
    $.each(data, function (key, entry) {
      if($.inArray(entry.Group, ids) === -1){
        ids.push(entry.Group);
        dropdown.append($('<option></option>').attr('value', entry.Group).text(entry.Group));
      }
    }); 

它给了我所有组的列表，没有重复。

我现在想要的是拉出与所选组相关的所有项目。我尝试了很多方法，但找不到解决方案。

我试过例如：

  $('#group').change(function()  {
  group = $(this).val();
  input1.empty();
  input1.append('<option selected="true" class="reset">Choose an item</option>');

 $.each(ids, function(index, value) {
  input1.append("<option>" + value[1] + "</option>");
});
 });

或者用：

    $('#group').change(function()  {
  var i = this.selectedIndex; 
   i = i - 1;
      input1.empty();
   input1.append('<option selected="true" class="reset">Choose an item</option>');

     $.each(ids, function(index, value) {
      input1.append("<option>" + value[i].Item+ "</option>");
    });
   });

它给了我一个“未定义”的列表......有人可以帮忙吗？ （我无法使用编辑器，因为我使用的是 JSON 文件...）

好的，这里是一个更直观的例子，带有一个简单的js数组。这个sn-p包含Swati给出的解决方案！

var data = [{
    "Group": "groupA",
    "Item": "groupA-item1",
    "Spec1": "item1-spec1",
    "Spec2": "item1-spec2"
  },
  {
    "Group": "groupB",
    "Item": "groupB-item1",
    "Spec1": "groupB-item1-spec1",
    "Spec2": "groupB-Item1-spec2"
  }, {
    "Group": "groupA",
    "Item": "groupA-item2",
    "Spec1": "groupA-Item1-spec1",
    "Spec2": "groupA-Item2-spec2"
  }
]
let dropdown = $('#group');
let input1 = $('#item');
let input2 = $('#spec1');
let input3 = $('#spec2');
dropdown.empty();
dropdown.append('<option selected="true" class="reset">Choose a group</option>');
var ids = [];
$.each(data, function(key, entry) {
  if ($.inArray(entry.Group, ids) === -1) {
    ids.push(entry.Group);
    dropdown.append($('<option></option>').attr('value', entry.Group).text(entry.Group));
  }
});

$('#group').change(function() {
  group = $(this).val();
  input1.empty();
  input1.append('<option selected="true" class="reset">Choose an item</option>');
  //filter your json..get only json array where group matchs
  var items = $(data)
    .filter(function(i, n) {
      return n.Group === group;
    });
  //add to your options
  $.each(items, function(index, value) {
    console.log(value.Item)
    input1.append("<option>" + value.Item + "</option>");
  });
});

$('#item').change(function()  {
    si_group = $(this).val(); 
    var selected_items = $(data).filter(function(i, n) {
    return n.Item === si_group;
  });
  $.each(selected_items, function(index, value) {
   input2.text(value.Spec1);
   input3.text(value.Spec2);
  });
  

});

.select_group{
  display:flex;
  flex-direction:column;
}
#spec1,#spec2{
  display:inline-block;
  border:1px solid #eee;
}
label{
  font-weight:bold
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select_group">
                                
                                 <div>
                                    <label for="group" class="flex j-center a-center"> Group | </label>
                                    <select id="group" name="group"></select>
                                </div>
                                 <div>
                                    <label for="item" class="flex j-center a-center"> Item | </label>
                                        <select id="item" name="medoc"></select>
                                </div>
                                <div>
                                    <label for="spec1" class="flex j-center a-center"> Item spec1 :</label>
                                    <div id="spec1" type="text" class=""></div>
                                </div>
                                <div>
                                    <label for="spec2" class="flex j-center a-center"> item spec2 :</label>
                                    <div id="spec2" class="">
                                        <span class="icon"></span>
                                    </div>
                                </div>

                            </div>

Answer 1

您可以使用filter 过滤您的JSON Array 并仅获取匹配值数组，然后简单地循环遍历filter arrays 并将值添加到您的选择框。

演示代码：

var data = [{
    "Group": "groupA",
    "Item": "groupA-item1",
    "Spec1": "item1-spec1",
    "Spec2": "item1-spec2"
  },
  {
    "Group": "groupB",
    "Item": "groupB-item1",
    "Spec1": "groupB-item1-spec1",
    "Spec2": "groupB-Item1-spec2"
  }, {
    "Group": "groupA",
    "Item": "groupA-item1",
    "Spec1": "groupA-Item1-spec1",
    "Spec2": "groupA-Item2-spec2"
  }
]
let dropdown = $('#group');
let input1 = $('#item');
dropdown.empty();
dropdown.append('<option selected="true" class="reset">Choose a group</option>');
var ids = [];
$.each(data, function(key, entry) {
  if ($.inArray(entry.Group, ids) === -1) {
    ids.push(entry.Group);
    dropdown.append($('<option></option>').attr('value', entry.Group).text(entry.Group));
  }
});

$('#group').change(function() {
  group = $(this).val();
  input1.empty();
  input1.append('<option selected="true" class="reset">Choose an item</option>');
  //filter your json..get only json array where group matchs
  var items = $(data)
    .filter(function(i, n) {
      return n.Group === group;
    });
  //add to your options
  $.each(items, function(index, value) {
    console.log(value.Item)
    input1.append("<option>" + value.Item + "</option>");
  });
});
//same do for other selects

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="group">
</select>
<select id="item">
</select>