Question

我确信这已经完成，我怀疑我不是在寻找正确的条款，所以请不要因为询问已经回答的问题而爆炸。

我有一系列项目属性（动态），我想用选择框向下钻取到最终项目。

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的服务器，因为数据已经在原始对象数组中传递，因此会给服务器带来不必要的负担。

更新我意识到我需要稍微改进一下原来的计划，以使其更有用。用户应该能够首先选择任何选择框，并且剩余未选框的选项应根据其存在或QoH（手头数量）更新为启用或禁用。不应出现JSONarray中不存在的选项（如黑色），但应禁用存在但未选择大小/颜色/样式或0 QoH的选项。

当选择了所有框时，应该查询JSONarray以查找匹配这些选项的itemAtID，并且应该更新隐藏字段（itemAtID）并启用提交按钮。

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

创建空数组（formSelects）。

循环通过formFields数组，1）根据当前字段选择启用或禁用选项; 2）当存在选择时，将其推送到formSelects数组。

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

我认为这将解决我的问题。如果有人发现此计划存在任何缺陷，请告知我们。我对jQuery不是很流利，所以在我第二天尝试理清正确的语法之前，发现我的计划不会工作会很好。

更新：刚刚意识到第一个缺陷。我必须找到一种方法来处理重置表单，这样你就不会被你的选择所搞砸......换句话说，如果你选择的样式会禁用你想要的大小或颜色，那么你就会陷入困境......不知道如何处理。

感谢您的帮助以及您对我的转变计划的耐心。

Answer 1

您可以使用此代码

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

Answer 2

对于您可以执行的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>');
     }
});

尝试使用jQuery

2 个答案: