1

我正在尝试在 jqmodal 中填充具有不同产品尺寸的下拉列表。我真的无法让它工作。任何帮助表示赞赏。

我的 JSON

{
    "product": {
        "variants": {
            "3394248": {
                "id": 3394248,
                "code": "19",
                "ean": "19",
                "sku": "19",
                "price": {
                    "price": 19.95,
                    "price_incl": 23.7405,
                    "price_excl": 19.95,
                    "price_old": 0,
                    "price_old_incl": 0,
                    "price_old_excl": 0
                },
                "title": "Maat 95",
                "active": false
            },
            "3376388": {
                "id": 3376388,
                "code": "19",
                "ean": "19",
                "sku": "19",
                "price": {
                    "price": 19.95,
                    "price_incl": 23.7405,
                    "price_excl": 19.95,
                    "price_old": 0,
                    "price_old_incl": 0,
                    "price_old_excl": 0
                },
                "title": "Maat 100",
                "active": true
            }
        },
    }
}

我的剧本

<script type="text/javascript">
$('#productVariations').jqm({
  trigger: 'a.ex2trigger'
});

function loadProductVariations(){

var productId = '{{ product.fulltitle }}';
var url = 'http://shop.com/'+productId+'/?format=json';


  $.getJSON(url,function(data){

    var variantHtml = '';

    $.each(data.product.variants, function(index, variants){   
      variantHtml = variantHtml + '<option value="' +variants.id+'</option>';
    });

    $('#productoptions').html(variantHtml);
});
}

我的html

<div class="jqmWindow" id="productVariations">
Even geduld aub... <img src="https://shop.com/com/ajax-loader.gif?1" alt="loading" />
<span id="close">
  <button class="jqmClose">Close</button>
</span>
<br/><br/>
<form class="formProduct" id="product_configure_form" method="post" action="{{ ('cart/add/' ~ product.vid) | url }}" enctype="application/x-www-form-urlencoded">
  <div id="productoptions">
    <select onchange="document.getElementById('product_configure_form').action = 'http://shop.com/product/variants/2140679/'; document.getElementById('product_configure_form').submit();" id="product_configure_variants" name="variant">

    </select>
  </div>
  <a id="submit" class="button gray" href="#" onclick="$('#product_configure_form').submit(); return false;" title="{{ 'Add to cart' | t }}">{{ 'Add to cart' | t }}</a>
</form>
<span id="message"></span>

这是一个概念，所以请原谅我当前代码中的错误！我唯一需要知道的是如何填充下拉框。

4

1 回答 1

1

一方面，您的 json 格式不正确。缺少 2 个右括号，我已在您的原始帖子中对其进行了编辑。

其次，尝试像这样更改循环：

$.each(data.product.variants, function(index, variants){   
variantHtml = variantHtml + '<option value="' +variants.id+'</option>';
});

到

for (var i in data.product.variants) {
     var v = data.product.variants[i];
     var $opt = $("<option>").text(v.title);
     $("#productoptions select").append($opt);
}
于 2012-07-07T02:08:53.117 回答