將選擇標簽更改為輸入文字

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
    }
}