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

update dropdown menu values depending on user selection

本文关键字：下拉菜单 更新 选择 用户      更新时间：2023-09-26

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

thanks a lot

保留您的大小数量和对象，并相应地更新选择。或者你可以把大小和数量作为选择的值，然后处理字符串，例如value="s|10"，然后分割字符串，或者使用html的data属性(或其他属性)…无论如何，我认为这是下面最好的选择:

<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>

经过一些研究，似乎你不能从<option>中的任何标签中获得文本()或html()。我稍微改变了选项中的文本，这样我就可以从选项标签中检索值作为字符串，并进行了分割。

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>");
        }
    });
});
相关文章：