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

【问题标题】：update dropdown menu values depending on user selection根据用户选择更新下拉菜单值
【发布时间】：2011-08-02 01:16:20
【问题描述】：

我有以下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。

非常感谢

【问题讨论】：

到目前为止你尝试过什么？（此外，如果您返回并接受其他问题的一些答案，人们更有可能提供帮助：这表明您对过去帮助过您的人有一定的尊重。）

标签： javascript jquery

【解决方案1】：

保留和反对您的尺码数量并相应地更新选择。或者，您可以将大小和数量都作为选择的值，然后处理字符串，例如 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>

【讨论】：

顺便说一句 - 据我所知，您无法检索嵌入在选项标签中的 html。
我取出了
我玩了一会儿，想知道在第一次加载 dom 时是否可以显示选择下拉菜单。 ATM 您必须在第一个下拉列表中选择一个值来触发 javascript 并在“数量”下拉列表中设置正确的值。
这怎么可能？您可以发布一个示例还是我必须发布一个新问题？
我将带有选择框的版本添加到我的答案中。

【解决方案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>");
        }
    });
});

【讨论】：

干得好，虽然在 safari 4 中小提琴示例不起作用
我认为这与脚本没有任何关系...我无法使用 Jquery 在任何 Safari 浏览器中运行任何东西。其他框架都很好，但是一旦我添加了 jquery，它就不再起作用了。你有没有在 JSFiddle 之外尝试过这个？对我来说，它在 Safari 中运行良好。