带有 jquery

如何解决带有 jquery

我有一系列 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","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,value) {
      input1.append("<option>" + value[i].Item+ "</option>");
    });
   });

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

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

var data = [{
    "Group": "groupA","Spec2": "item1-spec2"
  },"Spec2": "groupB-Item1-spec2"
  },{
    "Group": "groupA","Item": "groupA-item2","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,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,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>

解决方法

您可以使用 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","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>

如何解决带有 jquery

解决方法

相关推荐