Question

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

亚马逊和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

每次切换时都不需要渲染和重新渲染字段。简单地隐藏它们就更容易了。

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

＆＃13;

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();
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用两个特定的不同选择器来执行此操作，其中一个用于下拉，其他文本用于获取getter而不是十个。选择10+将更改选择控件名称，它将指向您的文本框名称或者如果要切换回然后还原选择框的旧名称并删除文本框名称。

使用jquery切换方法和prop属性，你可以处理或修改你正在使用的控件的名称道具。我想你已经得到它。

您的服务器端代码可以使用此逻辑轻松捕获发布数据。

如果没有，可以索取我可以给你看的示例代码。

Answer 3

虽然有更好的方法可以做到这一点我发布这个来回答你的版本无法正常工作的原因。基本上你是绑定到一个尚不存在的元素，即动态内容。

Jquery使用on方法处理此问题。

您可以通过添加静态祖先并将其绑定到其中来使其工作。为了更好地理解事件冒泡和委托的工作原理，请查看此链接。 http://api.jquery.com/on/

像这样的东西

<强> HTML

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

<强> JS

$("#staticAncestor").on("change",'.qty-input',function(){
  if (parseInt(this.value) < 10 && !$( "#txtQuantity" ).length){

        $(".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">'
        );
     }
});

这是笔http://codepen.io/anon/pen/jAQogj

欢呼和快乐的编码！

Answer 4

问题是这个......

一旦你从DOM中删除了对象，你还要删除事件处理程序，如果你仍然想要采用替换方法，你必须重新绑定事件处理程序，如

    $(document).ready(function() {
   function test(){
     if (parseInt(this.value) < 10) {
       $(".container ").html(
         '<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>'
       );
     } else {
       $(".container").html(
         '<input style="display: inline;" maxlength="3" min="1" pattern="\d+" autocomplete="off" name="quantityBox" class="qty-input" aria-label="Quantity" type="number">'
       );
     }
      $(".qty-input").on('change', test);
   }
   $(".qty-input").on('change', test);
 });

https://jsfiddle.net/happymacarts/pn1qeyg9/1/

Answer 5

这会奏效。您的示例不起作用，因为当您替换DOM节点/元素时，它不再处理更改事件，因此函数被绑定或执行。

＆＃13;

$(".qty-input").change(updateControl);

function updateControl(evt) {
  var template;
  if (parseInt(this.value) < 10 && this.tagName.toLowerCase() === "input") {
    template =
      '<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>';
  } else if (parseInt(this.value) > 9 && this.tagName.toLowerCase() === "select") {
    template =
      '<input style="display: inline;" maxlength="3" min="1" pattern="\d+" autocomplete="off" name="quantityBox" class="qty-input" aria-label="Quantity" type="number" value="'+this.value+'">';
  }

  if (template) {
    $(this).replaceWith(template);
    $('.qty-input option[value='+this.value+']').attr('selected', true);
    $('.qty-input').change(updateControl);
  }

}

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<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>

＆＃13;

Answer 6

检查一下我所说的Fiddle Demo

$(".select").on('click',function(){
if(isNaN($(this).val())){
    $(this).addClass("hide");
  $(".more").removeClass("hide");
  $(this).removeAttr("name","quantity");
  $(".more").attr("name","quantity");
} });

您可以根据自己的目的优化代码。

根据值更改输入类型

6 个答案: