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

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

  •  0
  • 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 年前
        1
  •  1
  •   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>');
                 }
              }      
         }
    }
    });
    
        2
  •  0
  •   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>');
         }
    });