将jQuery下拉列表中的值传递给simplecart.js

时间:2012-11-05 09:25:30

标签: jquery dropdownbox

我已经失去了至少两天的生命,试图将我的下拉菜单中的一些信息传递给simplecart js cart,所以任何帮助都会非常感激。

我正在尝试从'make'下拉传递值,也从'model'下拉传递给simplecartjs,但我不知道如何做到这一点。根据第一次下拉选择填充我的第二个下拉列表。如何创建一个读取这些值的添加到购物车按钮?这是下拉代码:

<script>
$(function() {

    $("#json-one").change(function() {

        var $dropdown = $(this);

        $.getJSON("compatibility.json", function(data) {

            var key = $dropdown.val();
            var vals = [];

            switch(key) {
                case 'Canon':
                    vals = data.Canon.split(",");
                    break;
                case 'Nikon':
                    vals = data.Nikon.split(",");
                    break;
                case 'base':
                    vals = ['Please choose from above'];
            }

            var $jsontwo = $("#json-two");
            $jsontwo.empty();
            $.each(vals, function(index, value) {
                $jsontwo.append("<option>" + value + "</option>");
            });

        });
    });

});
</script>

这是下拉html:

<select id="json-one">
    <option selected value="base">Camera Model</option>
    <option value="Canon">Canon</option>
    <option value="Nikon">Nikon</option>
</select>

<br />

<select id="json-two">
    <option>Please choose from above</option>
</select>

对于我的生活,我无法弄清楚如何阅读这些选择并将它们传递给添加到购物车按钮。有什么想法吗?

1 个答案:

答案 0 :(得分:0)

这不起作用吗? (几乎取自simplecartjs.org文档)

如果不符合要求,则返回false。

<script>
    $(function(){
        /* current stuff */
    })();

    simpleCart.bind( 'beforeAdd' , function( item ){
        if( item.get( 'make' ) === '' || item.get( 'model' ) === ''){
            // If the dropdowns are empty or it you set them to none etc
            alert('Please remember to select a make and model');
            return false; // prevents item from being added to cart
        }
    });
</script>

然后将您放入货架项目中。

<div class="simpleCart_shelfItem">
    <h2 class="item_name"> Awesome T-shirt </h2>
    <p>
        <select class="item_make" id="json-one">
            <option selected value="base">Camera Model</option>
            <option value="Canon">Canon</option>
            <option value="Nikon">Nikon</option>
        </select>

        <br />

        <select class="item_model" id="json-two">
            <option>Please choose from above</option>
        </select>

        <br />

        <input type="text" value="1" class="item_Quantity"><br>
        <span class="item_price">$xx.xx</span><br>
        <a class="item_add" href="javascript:;"> Add to Cart </a>
    </p>
</div>