根據用戶選擇更新下拉菜單值

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

保留並反對您的尺寸數量，並相應地更新選擇。 或者，您可以將大小和數量都作為選擇的值，然后處理字符串，例如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>

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 個解決方案

解決方案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