Question

我有订购衬衫的订单。我希望有一个下拉菜单让用户选择他们想要购买的数量，具体取决于他们选择我想要添加或删除每件衬衫尺寸的下拉菜单。

最初页面上有一个尺寸下拉，数量下拉。如果他们从数量下拉菜单中选择3，我想要两个更大尺寸的下拉菜单显示填充可用尺寸，小到XXL，供用户选择他们想要的额外衬衫尺寸。

我该怎么做？

这是我选择数量时需要添加的尺寸下拉菜单。数量下降1到10。

<tr>
    <td colspan="2" align="center">
        <p><img src="shirt.png" width="200" height="201" /></p>
        <p>Size:
            <label>
                <select name="shirtsize" id="shirtsize" id="size">
                    <option>please choose</option>
                    <option>Small</option>
                    <option>Medium</option>
                    <option>Large</option>
                    <option>XL</option>
                    <option>XXL </option>
                </select>
            </label>
            <br />
            Price: $15.00
        </p>
    </td>
</tr>

Answer 1

如果你想使用JQuery：

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
    for (var i=1;i<10;i++){
        $('#num').append('<option value="' + i + '">'+ i +'</option>');
    }
    var str = "<select><option>S</option><option>M</option><option>L</option></select>";
    $('#num').change(function (){
        var num = $('#num option:selected').val();
        $('#sizes').empty();
        for (var i =1; i<=num ; i++){
            $('#sizes').append($(str));
        }
    });
});
</script>
<body>
<div>select amount:<select id="num"></select></div>
<div>select size:<div id="sizes"></div></div>
</body>
</html>

如何使用javascript向页面添加下拉菜单？

1 个答案: