Question

我正在努力寻找一种更好的方法来收集多个输入。目前，我使用滑块来表示用户希望输入的项目数。如果用户说选择3，那么我正在寻找一种方法来显示他们输入3个项目的方式。

我想我需要说的是如果用户选择带滑块的3，那么我需要使用相同的ID显示具有一定宽度的3个输入元素。说像银行可能会要求您的销。这可能吗。在我的例子中，＃boxnumber是需要创建的div。非常感谢

$(function() {
$("#boxnumber").hide();
$("#slider").live('change', function() {

if($(this).val()>0)
  $("#boxnumber").addClass("ui-input-text").show(1000);
else
if ($(this).val()==0)
  $("#boxnumber").hide(1000);

 });
});

+++ +++ EDIT

<div id="boxnumber">
  <label for="boxamount">Enter box numbers *</label>
  <input type="text" name="boxamount" id="boxamount" value="" />
</div>

此输入最初是隐藏的。

Answer 1

采用HTML如下

<div id="slider2box"></div>

然后尝试这个jQuery代码

$(function() {
    $("#slider").live('change', function() {
        $('#slider2box').empty();
        for(var i=0; i<$(this).val().parseInt(); i++){
            $('#slider2box').append('<div class="item" id="item'+i+'"></div>');
        }
    });
});

希望它能运作

现在在 div 上设置样式以制作框

Answer 2

希望这会奏效： http://jsfiddle.net/laheab/XkfsZ/4

$(function() {
   $("#slider").live('change', function() {
      $('#boxnumber').empty();
      for(var i = 0; i < $(this).val(); i++){
         $('#boxnumber').append(
            '<div>
              <label for="boxamount">Enter box ' + (i+1) +' number:</label>
              <input type="text" name="box-'+i+'-no" id="box-'+i+'-no" />
            </div>'
         );
          }
   });
});

收集多个输入的更好方法

2 个答案: