Question

我有以下

    <select id="quantity_select{$item.id}"
             onchange="update_quantity({$item.id}, {$item.quantity});" name="item_quantity_select">
                                        <option name="quantity_1">1</option>
                                        <option name="quantity_2">2</option>
                                        <option name="quantity_3">3</option>
.
.
.
                                        <option name="quantity_more">10+</option>

         </select>

我期望的行为是，当用户选择选项“ quantity_more”时，select标签消失了，出现了<input type="text" value="{$item.quantity}" />。我相信这必须使用javascript完成，有没有简单的方法？

Answer 1

您不能将选择下拉列表更改为文本类型的输入。我建议添加一个附加的输入字段，并将其可见性设置为“隐藏” /“显示”为“非”，并在选择“更多”选项时切换显示属性。

Answer 2

为您的选择定义onchange处理程序，并根据用户输入的值，您可以创建一个input元素并将其附加到DOM中所需的位置。

function update_quantity(id, quantity) {
    var selectedOption = document.getElementById("quantity_select" + id); 
    if (selectedOption.value === "10+") {
        selectedOption.style.display = "none";
        var input = document.createElement("input");
        input.value = quantity;
        document.querySelector('body').appendChild(input); // If you want to append at the end of the body
    }
}

将选择标签更改为输入文字

2 个答案: