我确信这已经完成,我怀疑我只是没有寻找正确的术语,所以请不要因为我问了一些已经得到回答的问题而激怒我。
我有一个项目属性数组(动态),我想用选择框深入到最后一个项目。
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不是很熟练,所以在第二天尝试整理出正确的语法之前,如果我发现我的计划行不通,那就太好了。
更新:只需意识到第一个缺陷。我必须想出一种方法来处理重置表单,这样你就不会被你的选择给困住了。。。换句话说,如果你的样式选择禁用了你想要的尺寸或颜色,你会被卡住。。。不知道该怎么处理。
谢谢你的帮助和耐心,我的转换计划。