Question

原谅我，但我不太了解javascript，而且我在没有帮助的情况下摸索了一个项目。我正在尝试在我们的网站上实施Shopatron添加到购物车功能。他们提供的代码非常简单，但每页只允许一个产品sku。我在页面上有多个产品。

他们为javascript指示了这个：

$(document).ready(function() {
  Shopatron('#atc_button_div_id').addToCartButton({
    partNumber: '1234'
  }, {
    clickSuccess: function() {
      alert('Successfully added item to cart');
    }
  });
});

这将添加＆＃34;添加到购物车＆＃34;页面上的按钮：

<div id="atc_button_div_id"></div>

所以他们只允许产品＆＃34; 1234＆＃34;通过，那就是它。我需要一个下拉菜单，当从列表中选择产品时，该部件号会进入购物车，例如：

<select><option value="1234">Product 1</option>

产品2 产品3

我会很高兴得到一些帮助！谢谢

Answer 1

试试这个 - 您可能需要根据您的Shopatron代码进行调整 - 但希望它能为您指明正确的方向。

<强> HTML

<select name='products'>
    <option value='123'>Tea</option>
    <option value='456'>Coffee</option>
    <option value='789'>Sugar</option>
</select>

因为你正在使用jQuery：

$(document).ready(function() {

    // Your Shopatron gubbins here
    Shopatron('#atc_button_div_id').addToCartButton({
        partNumber: selected // <- this is your selected part number
        }, {
            clickSuccess: function() {
            alert('Successfully added item to cart');
        }
    });


    // Handler for on change event
    $('select[name="products"]').change(function() {

        // Store $(this) in var element
        var element = $(this);

        // Store the selected option in var selected
        var selected = element.children('option:selected').val();

        // You can now access the selected element
        alert(selected);   

        // Look for a way for dynamically passing var selected into Shopatron
        // in the API docs: http://developer.shopatron.com/files/Add_To_Cart_JavaScript_API_Guide_V2_2.pdf

    });

});

jQuery .change（）here的文档，以及：选定的选择器here

祝你好运！

Answer 2

你的HTML：

<select name='ddlProduct'>
 <option value='Product1'>Product 1</option>
 <option value='Product2'>Product 3</option>
 <option value='Product3'>Product 3</option>
</select>

和你的jquery代码：

$(function() {
  $(document).on("change", "select[name='ddlProduct']", function () {
      alert($(this).val());
  });
});

Javascript - 选择<option>时，执行操作

2 个答案: