Question

我有以下html：

<label>Sizes
  <select name="item_options[product_size]">
    <option value="s">small <span class="avail-inventory">10</span></option>
    <option value="m">medium <span class="avail-inventory">1</span></option>
    <option value="l">large <span class="avail-inventory">5</span></option>
    <option value="xl">extra large <span class="avail-inventory">10</span></option>
  </select>
</label>
<label>Quantity
  <select name="quantity">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
  </select>
</label>

这是购物车的一部分，用户可以选择产品选项（尺寸）和数量。由于数量总是变化的，我希望动态的最大数量变化取决于用户选择的产品选项。

例如，如果用户选择的数量较大，则数量下拉列表中的最大数量也应仅为5。

非常感谢

Answer 1

保留并反对您的尺寸数量并相应地更新选择。或者你可以将大小和数量都作为select的值，然后处理字符串，例如value =“s | 10”然后拆分字符串，或者使用html的数据属性（或其他一些属性）。无论如何，我认为这是下面的最佳选择：

<html>
    <head>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
        <script>
        sizes = {"m": 5, "s": 10, "l":2, "xl": 50}
        $(function(){
            $("#sizes").change(function(){
                index = $(this).val();

                var html = '<select name="quantity">';
                for (var i=0;i<sizes[index];i++){
                    html += "<option value=" + (i + 1) +">" + (i+1) + "</option>";

                }
                html +="</select>"

                $("#quantity").html(html);
            })
        })
        </script>
    </head>
    <body>
        <label>Sizes
    <select id="sizes" name="item_options[product_size]">
                <option value="s">small <span class="avail-inventory">5</span></option>

                <option value="m">medium <span class="avail-inventory">10</span></option>

                <option value="l">large <span class="avail-inventory">2</span></option>

                <option value="xl">extra large <span class="avail-inventory">50</span></option>
            </select>
</label>
<br>
<label>Quantity</label>
  <span id="quantity">
  Please select size first
  </span>




    </body>
</html>

修改

如果您想在此处显示下拉菜单，请执行以下操作：

<html>
    <head>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
        <script>
        sizes = {"m": 5, "s": 10, "l":2, "xl": 50}
        $(function(){
            $("#sizes").change(function(){
                index = $(this).val();
                console.log(sizes[index])
                var html = '';
                for (var i=0;i<sizes[index];i++){
                    html += "<option value=" + (i + 1) +">" + (i+1) + "</option>";

                }


                $("#quantity").html(html);
                $("#quantity").removeAttr("disabled");
            })
        })
        </script>
    </head>
    <body>
        <label>Sizes
    <select id="sizes" name="item_options[product_size]">
                <option value="s">small <span class="avail-inventory">5</span></option>

                <option value="m">medium <span class="avail-inventory">10</span></option>

                <option value="l">large <span class="avail-inventory">2</span></option>

                <option value="xl">extra large <span class="avail-inventory">50</span></option>
            </select>
</label>
<br>
<label>Quantity</label>
<select id="quantity" disabled=true>
<option>Please select size first</option></select>





    </body>
</html>

Answer 2

经过一些研究后，您似乎无法从<option>中的任何标签获取text（）或html（）。我稍微更改了选项中的文本，以便我可以将Option标记中的值作为字符串检索，然后进行拆分。

http://jsfiddle.net/kasdega/hqLPp/

<option value="s">small - 10</option>


$(document).ready(function(){
    $("#productSize").change(function(){
        var me = $(this);
        var avail = me.find("option:selected").html().split("-")[1].trim();

        $("#quantity option").each(function() {
            $(this).remove();
        });

        for(var i=1; i<= avail; i++) {
            $("#quantity").append("<option>"+i+"</option>");
        }
    });
});

根据用户选择更新下拉菜单值

2 个答案: