代码之家 › 专栏 › 技术社区 › Jason Peterman

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

cascading select json jquery

Jason Peterman · 技术社区 · 7 年前

我确信这已经完成,我怀疑我只是没有寻找正确的术语,所以请不要因为我问了一些已经得到回答的问题而激怒我。

我有一个项目属性数组(动态),我想用选择框深入到最后一个项目。

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']
  }
 ];

我有三个动态生成的选择框:

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

 <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>

当用户选择尺寸时,我想查询数组并返回可用的颜色。当用户选择样式时,我想返回itemAtID。

这是我试图完成的一个非常简单的表示,但如果我能做到这一点,我可以扩大它以符合我的目的。我确信必须有一个插件来实现这一点,但我还没有找到一个不需要AJAX的插件,AJAX会给服务器带来不必要的负载,因为数据已经在原始对象数组中传递。

更新我已经意识到我需要对我最初的计划稍加改进,使其更具实用性。用户应能够首先选择任何选择框,其余未选择框的选项应根据其存在或QoH(现存量)更新为启用或禁用。JSONarray中不存在的选项(如黑色)不应出现,但应禁用存在但不在所选大小/颜色/样式或QoH为0的选项。

对所有框进行选择后,应查询JSONarray以查找与这些选项匹配的itemAtID,并更新隐藏字段(itemAtID),并启用submit按钮。

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

创建空数组(formSelects)。

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

如果窗体选择。长度等于formFields。在JSONarray中搜索符合条件的行,更新隐藏的itemAtID字段,并启用submit按钮(最终更新图像)。

我认为这将解决我的问题。如果有人发现这个计划有任何缺陷,请告诉我。我对jQuery不是很熟练,所以在第二天尝试整理出正确的语法之前,如果我发现我的计划行不通,那就太好了。

更新:只需意识到第一个缺陷。我必须想出一种方法来处理重置表单,这样你就不会被你的选择给困住了。。。换句话说,如果你的样式选择禁用了你想要的尺寸或颜色,你会被卡住。。。不知道该怎么处理。

谢谢你的帮助和耐心,我的转换计划。

2 回复 | 直到 7 年前

Abhilash Ravindran C K 7 年前

你可以使用这个代码,

//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>');
             }
          }      
     }
}
});

Varun 7 年前

对于 id_attribute2 id选择可以执行的值。

$(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>');
     }
});