尝试使用 jQuery 从单个 JSON 数组创建动态级联选择

Question

我确信这已经完成了，我怀疑我只是没有在搜索正确的术语，所以请不要因为我问的问题已经得到解答而责备我。

我有一组项目属性（动态），我想使用 select 个框向下钻取到最终项目。

var JSONarray = [
 {'itemAtID':1, 
  'attribute1':'sm',
  'attribute2':'blue',
  'attribute3':'short sleeved'
 },
 {'itemAtID':2, 
  'attribute1':'med',
  'attribute2':'blue',
  'attribute3':'short sleeved'
 },
 {'itemAtID':3,
  'attribute1':'lg',
  'attribute2':'white',
  'attribute3':'short sleeved'
 },
 {'itemAtID':4, 
  'attribute1':'med',
  'attribute2':'white',
  'attribute3':'short sleeved'
 },
 {'itemAtID':5,
  'attribute1':'lg',
  'attribute2':'blue',
  'attribute3':'long sleeved'
 }];

更新数组

var JSONarray = [
 {'itemAtID':1, 
  'attribute1':'sm',
  'attribute2':'blue',
  'attribute3':'short sleeved',
  'QoH': 3,
  'image': '101001506-1.jpg'
 },
 {'itemAtID':2, 
  'attribute1':'med',
  'attribute2':'blue',
  'attribute3':'short sleeved',
  'QoH': 3,
  'image': '101001506-2.jpg'
 },
 {'itemAtID':3,
  'attribute1':'lg',
  'attribute2':'white',
  'attribute3':'short sleeved',
  'QoH': 3,
  'image': '101001506-3.jpg'
 },
 {'itemAtID':4, 
  'attribute1':'med',
  'attribute2':'white',
  'attribute3':'short sleeved',
  'QoH': 3,
  'image': '101001506-4.jpg'
 },
 {'itemAtID':5,
  'attribute1':'lg',
  'attribute2':'blue',
  'attribute3':'long sleeved',
  'QoH': 3,
  'image': '101001506-5.jpg'
 }];


var formFields =  [
  {'name':'itemAt1',
   'label': 'Size',
   'fieldOpts': ['sm','med','lg','xl']
  },
  {'name':'itemAt2',
   'label': 'Color',
   'fieldOpts': ['blue','white','black']
  },
  {'name':'itemAt3',
   'label': 'Style',
   'fieldOpts': ['short sleeve','long sleeve']
  }
 ];

我有三个动态生成的 select 框：

已更新以反映所有 SELECT 框中的初始选项

 <form>
  <label>Size</label>
  <select name="attribute1" id="id_attribute1">
   <option value="">Select Size</option>
   <option value="sm">sm</option>
   <option value="md">md</option>
   <option value="lg">lg</option>
  </select>

  <label>Color</label>
  <select name="attribute2" id="id_attribute2">
   <option value="">Select Color</option>
   <option value="blue">blue</option>
   <option value="white">white</option>
  </select>

  <label>Style</label> 
  <select name="attribute3" id="id_attribute3">
   <option value="">Select Style</option>
   <option value="short sleeve">short sleeve</option>
   <option value="long sleeve">long sleeve</option>
  </select> 
 </form>

当用户 select 尺寸时，我想查询数组和 return 可用颜色。当用户 selects 样式时，我想 return itemAtID.

这是我想要完成的一个非常简单的表示，但如果我能完成这项工作，我可以扩大它以适应我的目的。我确定必须有一个插件，但我找不到一个不需要 AJAX 的插件，这会给服务器带来不必要的负载，因为数据已经在原始数组中传递对象。

更新我意识到我需要稍微改进我的原始计划以使其更有用。用户应该能够首先 select 任何 select 框，其余未select 框的选项应根据它们的存在或 QoH 更新为启用或禁用（现有数量）。 JSONarray 中不存在的选项（如黑色）不应出现，但存在但不在 selected size/color/style 中或 QoH 为 0 的选项应被禁用。

当所有框的 selection 完成后，应查询 JSONarray 以获取与这些选项匹配的 itemAtID，并更新隐藏字段 (itemAtID) 并启用提交按钮。

所以我的计划是使用一个class基于Change来触发函数。

创建空数组 (formSelects)。

遍历 formFields 数组和 1) 根据当前字段启用或禁用选项 selection 和 2) 当 selection 存在时，将其推送到 formSelects 数组。

如果 formSelects.length 等于 formFields.length，则在 JSONarray 中搜索符合条件的行并更新隐藏的 itemAtID 字段并启用提交按钮（并最终更新图像）。

我认为这将解决我的问题。如果有人发现此计划有任何缺陷，请告诉我。我在 jQuery 方面不是很流利，所以如果我在第二天花时间尝试找出正确的语法之前发现我的计划行不通，那就太好了。

更新：刚刚意识到第一个缺陷。我必须想出一种方法来处理重置表单，这样你就不会被你的 selection 弄得一团糟……换句话说，如果你设置 selection 的样式会禁用尺寸或颜色你宁愿拥有，你会被困住......不知道如何处理。

感谢您的帮助和耐心等待我的转变计划。

Answer 1

对于 id_attribute2 id select 值你可以做。

$(document).on('change','#id_attribute1',function(){
     let tmpVal = $(this).find("option:selected").val();
     $("#id_attribute2").html('<option value="">please select color</option>');
     for(var z = 0 ; z < JSONarray.length ; z++)
     {
        if(JSONarray[z]['attribute1'] == tmpVal)
           $("#id_attribute2").append('<option value="'+JSONarray[z]['attribute2']+'">'+JSONarray[z]['attribute2']+'</option>');
     }
});

Answer 2

您可以使用此代码，

//Populate Colors based on Size Selected    
$('#id_attribute1').on('change',function(){
$("#id_attribute2").empty();
$("#id_attribute2").append('<option value="">please select color</option>');
for(var i = 0 ; i < JSONarray.length ; i++)
   {
      if(JSONarray[i]['attribute1'] == this.value)
         {
             $("#id_attribute2").append('<option value="'+JSONarray[i]['attribute2']+'">'+JSONarray[i]['attribute2']+'</option>');
         }
    }
});

//Populate Style based on Color Selected
$('#id_attribute2').on('change',function(){
$("#id_attribute3").empty();
$("#id_attribute3").append('<option value="">please select style</option>');
for(var i = 0 ; i < JSONarray.length ; i++)
   {
       if(JSONarray[i]['attribute2'] == this.value)
          {
              $("#id_attribute3").append('<option value="'+JSONarray[i]['itemAtID']+'">'+JSONarray[i]['attribute3']+'</option>');
          }
   }
});

//Return ItemAtID base on Style selected
$('#id_attribute3').on('change',function(){
    alert(this.value);
});

以上是直接的方法。可以减少代码如下，

//All Change event handled by single function
$('#id_attribute1,#id_attribute2,#id_attribute3').on('change',function(){
var id = this.id.substr("id_attribute".length); // id will give 1 or 2 or 3 that can be used to identify the select boxes
//id = 3 for the #id_attribute3 
if(id == 3)
{
    alert(this.value);
}
else
{
    var newid = parseInt(id) + 1;
    //Find the select box to populate
    var $newattrid = $("#id_attribute"+ newid);
    var attribute = 'attribute'+ newid;
    $newattrid.empty();
    //id = 1 for the #id_attribute1 
    if(id == 1)
    {
        $newattrid.append('<option value="" class="select">please select color</option>');
    }
    //For the #id_attribute2 
    else
    {
        $newattrid.append('<option value="">please select style</option>');
    }

    for(var i = 0 ; i < JSONarray.length ; i++)
    {
         if(JSONarray[i]['attribute'+id] == this.value)
         {
             if(id == 1)
             {
                  $newattrid.append('<option value="'+JSONarray[i][attribute]+'">'+JSONarray[i][attribute]+'</option>');
             }
             else
             {
                  $newattrid.append('<option value="'+JSONarray[i]['itemAtID']+'">'+JSONarray[i][attribute]+'</option>');
             }
          }      
     }
}
});

尝试使用 jQuery 从单个 JSON 数组创建动态级联选择

Trying to create dynamic cascading selects from a single JSON array using jQuery

jquery

json

select

cascading