Javascript 根据文本输入的值添加选项

如何根据文本输入的值向选择字段添加选项

这是我的输入文本：

<input type="text" id="amount" size="30" />

这是我要添加到的元素：

<span id="span_combo">
     <select name="foo" id="combo">
           <option value="1">1</option>  
           <option value="2">2</option>
     </select>
</span>

这是我现在的JS:

$("#amount").keyup(function(){
        var flag;
        $("#combo").show("slow");
        var a = $("#amount").val();
        if(a==""){
            $("#span_combo select").remove(true);
        }
        var i;
        for(i=1;i<=a-1;i++){
                $("#span_combo").append($("#span_combo select").first().clone(true));
        }
    });

---

我认为这是可行的：

$("#amount").keyup(function() {
        var current = $("#combo option").length;
        if(current < $(this).val()) {
            for(var i = current + 1;i<=$(this).val();i++) {
                $("#combo").append('<option value="'+i+'">'+i+'</option>');
            }
        } else {
            for(var i=(parseInt($(this).val(),10)+1);i<=current;i++) {
                $('#combo option[value="'+i+'"]').remove();
            }
        }
    });

您可能希望将输入验证添加到此函数中，但如果您正确使用它，它会实现您想要的功能

---

编辑：只是澄清一下，此代码不会在每个keyup事件上清除整个选择框，它只是添加新选项或删除最后的选项以获得指定数量的值。

如果要重建整个阵列：

$("#amount").keyup(function(){
        $("#combo").show("slow");
        var a = $("#amount").val();
        if(a==""){
            $("#span_combo select").remove(true);
        }


        $('#combo').empty();
        for(var i=1;i<=a-1;i++){
            $('<option />').attr('value', i)
                           .text(i)
                           .appendTo($('#combo'));
        }
    });

---

像这样的东西应该可以

现场演示：

---

基本上，每次按下键时清除选择框并重新填充。您可以通过添加一些检查来进一步优化此选项，以查看其值是否相同

是否尝试向选择框添加更多选项？或者更新文档中的其他元素？我的错。。。忘了顶部的流氓输入框。每次更新输入框时，您是否能够从0重新生成整个选项数组？您是否被限制为附加到原始数组？我想更新文档中的不同元素，而不是向SelectBox添加更多选项。如果没有，永远不要使用parseInt，至少10end@regilero说得好。我忘了这也是我先前的一个答案。感谢我对JohnP的评论，您忘记了parseInt表达式中的'10'

$("#amount").keyup(function(){
    var $combo = $('#combo');
    $combo.html('');
    var value = parseInt($('#amount').val(), 10);
    for (i = 1; i <= value; i++) {
        var $option = $('<option>').val(i).html(i);
        $combo.append($option);
    }
});