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

Question

I have the following html: 我有以下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>

This is part of a shopping cart where the user can pick product option(size) and quantity. 这是购物车的一部分，用户可以在其中选择产品选项（尺寸）和数量。 Since the quantity always varies, I would like the max quantity change on the fly depending on what product option the user chooses. 由于数量总是变化的，因此我希望根据用户选择的产品选项即时更改最大数量。

For instance if the user chooses size large the max number in quantity dropdown should also be only 5. 例如，如果用户选择大尺寸，则数量下拉列表中的最大数量也应仅为5。

thanks a lot 非常感谢

Answer 1

Keep and object of your size quantities and update the select accordingly. 保留并反对您的尺寸数量，并相应地更新选择。 Alternatively you could put both the size and quantity as a value of the select and then process the string eg value="s|10" and then split the string, or use the data attribute of the html (or some other attribute)... Anyhow I think this is the best option below: 或者，您可以将大小和数量都作为选择的值，然后处理字符串，例如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>

EDIT 编辑

if you want to have a dropdown displayed here is how to do it: 如果要显示下拉菜单，请执行以下操作：

<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

After some research it appears you can't get the text() or html() from any tags in an <option> . 经过一番研究之后，您似乎无法从<option>中的任何标签获取text（）或html（）。 I changed the text inside the options a bit so that I could retrieve the value from the Option tag as a string and just did a split. 我对选项内的文本进行了一些更改，以便可以将Option标记中的值作为字符串检索，并进行了拆分。

http://jsfiddle.net/kasdega/hqLPp/ 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 个解决方案

解决方案1
3 已采纳 2011-08-02 01:49:24

解决方案2
0 2011-08-02 02:08:53

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2011-08-02 01:49:24

解决方案2 0 2011-08-02 02:08:53

解决方案1
3 已采纳 2011-08-02 01:49:24

解决方案2
0 2011-08-02 02:08:53