Javascript Magento更改DIV的下拉可配置产品选项

我需要将可配置产品的选项显示为div，其中包含一个“a”，允许用户单击选项并选择它，而不是下拉列表。就像菜单一样（目标是显示鞋子的尺寸）

正如许多人所知，Magento使用Json响应填充下拉菜单的选项。（var spConfig=new Product.Config（getJsonConfig（）？>），该类位于js/varien/Product.js（Product.Config=class.create（））中

然后，我所做的是编辑文件template/catalog/product/view/type/options/configurable.phtml并替换类似的原始行为

'<?php
     echo ' 
                <ul class="super-attribute-select">';
         $resultado = json_decode($this->getJsonConfig(), true);
         $atributo=$resultado['attributes'][162]['options'];
         foreach($atributo as $att){
             echo '<li>';
             echo '<a value="'.$att['id'].'" price="'.$att['price'].'" href="javascript:void()" onclick="return assignValue()">'.$att['label'].'</a>';
             echo '</li>';
             }
     echo ' </ul>
            <div class="clear"></div>';
     ?>'

“”

这个简单的mod让我可以替换divs形成的小网格的菜单。现在我正试图创建一个Javascript函数来模拟本机行为，但只针对所选的选项（在本例中为鞋码）.根据我对代码的理解，它会将选项值与表单一起发送，因此我的想法是创建一个隐藏输入，然后在用户执行单击时通过Javascript函数分配值，如下所示：

'<script>
  function assignValue(value){
   //assign the value       
      document.getElementById('super_attribute[162]').value = value;
   //mod the class of the selected item
      this.addClassName("selected");
</script>'

'
函数赋值（值）{
//赋值
document.getElementById（'super_属性[162]”）。value=value；
//修改所选项目的类别
此.addClassName（“选定”）；
'

我认为可能有必要创建一个函数或调用一个方法，magento已经将该值设置为必需的。即使我也不知道在隐藏的输入上设置类“required entry”是否是一个好主意

---

你能帮我吗？任何形式的帮助或其他想法都将不胜感激。

这里有一个代码片段。太简单了=）

函数赋值（idattribute、price、value）{
var sal=new String（value）；//此值是您在div网格中向用户显示的值
var disp=新字符串（idattribute）；
$（'nameinpurthidden'）。值=显示；
$（'advice-required-entry-attribute'）.fade（）；
$$（'.nameinpurthidden'）。每个(
职能（e）{
e、 removeClassName（“活动”）；
}
)
$（sal）.addClassName（'active'）；

别忘了把输入值设为隐藏。这个输入值必须是你在网格上显示的属性。

希望这能帮上忙。如果我能帮上忙，请告诉我

---

您好！

您可能想把这个问题转移到听起来很棒的地方。我如何做到这一点？感谢Ricardo的脚本和您的时间回复，但是我正在尝试在可配置产品视图页面中获取相关产品的缩略图，而此脚本在我的ca中列出了可配置产品的属性值标签se color。假设有一个conf product attr“color”&4个简单产品作为具有attr color值的关联产品。现在我想要的是一个可配置的产品，没有下拉菜单，只有其关联产品的缩略图，当用户单击任何一个缩略图时，主图像将被关联产品主图像替换。

    <script type="text/javascript">
        function assignValue(idattribute,price,value){
            var sal = new String(value); //this value is what you are showing to the user in the div grid
            var disp = new String(idattribute);

            $('nameinputhidden').value=disp;
            $('advice-required-entry-attribute').fade();
                    $$('.nameinputhidden').each(
                     function(e){
                   e.removeClassName('active');
                      }
                      )
                    $(sal).addClassName('active');

    </script>