javascript - 根据值更改输入类型

Question

如果值小于 10，我希望将数字选择器的输入类型更改为下拉列表。对于大于 9 (10+) 的值，输入类型应更改回数字选择器。

Amazon 和 Sears.com 正在为一些桌面用户在其购物车中使用这种类型的数量选择器(需进行 AB 测试)。

我的问题是它会更改输入类型一次，但不会再次更改。

此外，保留输入类型之间的值的最佳实践是什么？我考虑过使用变量或复制到隐藏输入(即提交的实际字段)。

HTML:

<label class="mylabel">Quantity:</label>
<input style="display: inline;" maxlength="3" min="1" pattern="\d+" autocomplete="off" name="quantityBox" class="qty-input" aria-label="Quantity" type="number">
<input type="submit" name="btnAddToCart" value="Add To Cart" id="btnAddToCart" class="">

jQuery:

$(".qty-input").change(function(){
     if (parseInt(this.value) < 10){
        $(".qty-input").replaceWith(
          '<select id="txtQuantity" name="txtQuantity" class="qty-input">' +
          '<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>' +
          '<option value="10">10+</option>' +
          '</select>'
        );
     } 
     if (parseInt(this.value) > 9){
        $(".qty-input").replaceWith(
          '<input style="display: inline;" maxlength="3" min="1" pattern="\d+" autocomplete="off" name="quantityBox" class="qty-input" aria-label="Quantity" type="number">'
        );
     }
});

Answer 1

无需在每次切换字段时渲染和重新渲染字段。简单地隐藏它们会更容易。

一个非常基本的解决方案，错误处理和样式取决于您:

var high = $('#high')
var low = $('#low')

function onChange() {
  if (low.is(':visible')) {
    var value = low.val();
    high.val(value);
    if (parseInt(value) > 9) toggleInputs();
  } else {
    var value = high.val();
    low.val(value);
    if (parseInt(value) <= 9) toggleInputs();
  }
}

function toggleInputs() {
  $('#low').toggle();
  $('#high').toggle();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>Quantity:</label>
<input onchange='onChange()' id='high' style='display: none' />
<select onchange='onChange()' id='low'>
  <option value='0'>0</option>
  <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>
  <option value='10'>10+</option>
</select>