将输入转换为选择

我期待将输入转换为使用Jquery进行选择，同时从输入中获取值并将其用作选定选项。但是到目前为止，我只能在下面的代码中找到一半。任何人都可以看到它出错的地方吗？或者，也许建议一种替代方法。将输入转换为选择

HTML

<div class="inputDiv"><input type="text" id="input01" value="1" name="input01"/></div> 
<div class="inputDiv"><input type="text" id="input02" value="4" name="input02"/></div> 
<div class="inputDiv"><input type="text" id="input03" value="2" name="input03"/></div> 
<div class="inputDiv"><input type="text" id="input04" value="1" name="input04"/></div> 
<div class="inputDiv"><input type="text" id="input05" value="4" name="input05"/></div>

$(".inputDiv input[type=text]").each(function() { 
    var qty = $(this).val(); 
    var currentId = $(this).attr('id'); 
    alert(qty + " is a Number"); 
    alert(currentId + " is a ID"); 
    $(this).replaceWith('<select id="' + currentId + '" name="" class="NewSelect">' + 
      '<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>' + 
     '</select>'); 

     $("option[value=" +this.qty+ "]").attr('selected', 'selected'); 
});

来源

2012-07-13 rathervague

的ID必须是唯一的DOM – albertjan 2012-07-13 11:36:25

由于这是意外复制粘贴，上面 – rathervague 2012-07-13 11:42:41

$(".inputDiv input[type=text]").each(function() { 
     var qty = this.value; 
     var currentId = this.id; 
     var selectbox = $('<select id="'+currentId+'><option value="-1"></select>'); 
     $(this).replaceWith(selectbox); 
     for(var i = 1; i < 6; i++) { 
      var option = document.createElement('option'); 
      option.value = i; 
      $(option).text(i); 
      if(i==qty) option.setAttribute('selected','selected'); 
      selectbox.append($(option)); 

     } 

    });

JSFIDDLE

来源

2012-07-13 11:45:43 rsplak

干杯，工作！ – rathervague 2012-07-13 11:51:14

做这样的：http://jsfiddle.net/albertjan/heVc6/3/

在DOM：使ID的独特

<div class="inputDiv"><input type="text" id="input01" value="1" name="input01"/></div> 
<div class="inputDiv"><input type="text" id="input02" value="4" name="input01"/></div> 
<div class="inputDiv"><input type="text" id="input03" value="2" name="input01"/></div> 
<div class="inputDiv"><input type="text" id="input04" value="1" name="input01"/></div> 
<div class="inputDiv"><input type="text" id="input05" value="4" name="input01"/></div>

在javascript中：

$(".inputDiv input[type=text]").each(function() { 
    var qty = $(this).val(); 
    var currentId = $(this).attr('id'); 
    alert(qty + " is a Number"); 
    alert(currentId + " is a ID"); 
    $(this).replaceWith('<select id="' + currentId + '" name="" class="NewSelect">' + 
      '<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>' + 
      '</select>'); 

    //this qty instead of this.qty 
    //search for an option within the current div. 
    $("#" + currentId + " option[value=" + qty + "]").attr('selected', 'selected'); 
});

来源

2012-07-13 11:42:08 albertjan

编辑示例代码谢谢，但我需要输入b ecome选择框@rsplak有正确的想法 – rathervague 2012-07-13 14:15:07

你甚至看过我发布的jsfiddle吗？ hehe – albertjan 2012-07-13 14:15:58

是的，ic moo tools是默认的加载器，把它改成jquery来查看结果。虽然选项没有被选中。干杯 – rathervague 2012-07-13 14:19:09

试试这个：

$("input[type=text]").each(function() { 
    $(this).parent().replaceWith('<option id=' + this.id + ' value='+ this.value + ' name=' + this.name + ">" + this.value +"</option>") 
})   
$('option').wrapAll('</select>')

DEMO

来源

2012-07-13 11:59:14 undefined

将输入转换为选择

回答

相关问题