обновить значения выпадающего меню в зависимости от выбора пользователя - PullRequest
Новая
       1

обновить значения выпадающего меню в зависимости от выбора пользователя

0 голосов
/ 02 августа 2011

У меня есть следующий 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.

спасибо большое

Ответы [ 2 ]

3 голосов
/ 02 августа 2011

Сохраните и укажите размер вашего объекта и обновите его соответствующим образом.В качестве альтернативы вы можете указать размер и количество в качестве значения элемента 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>
0 голосов
/ 02 августа 2011

После некоторых исследований выясняется, что вы не можете получить текст () или html () из каких-либо тегов в <option>.Я немного изменил текст внутри параметров, чтобы можно было извлечь значение из тега 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>");
        }
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...