根据文本输入框的值添加<select>选项

Question

如何根据文本输入框中的值向选择框添加选项？

这是我的输入文本：

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

- Lyan Dwi Pangestu

---

你是想要给选择框添加更多选项吗？还是想要更新文档中的其他元素？ - Tim Joyce

我的错...忘记了你在顶部的流氓输入框。你能否每次更新输入框时重新构建整个选项数组从0开始，还是只能附加到原始数组？ - Tim Joyce

我想要更新文档中的不同元素，而不是向选择框添加更多选项。 - Lyan Dwi Pangestu

Answer 1

类似这样的东西应该可以实现

演示请看这里：http://jsfiddle.net/NdpuM/1/

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

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

- JohnP

---

永远不要使用parseInt而不在末尾加上",10)"。 - regilero

@regilero 很好的观点。我之前的回答也忘了这一点。谢谢。 - JohnP

Answer 2

我认为这可能可行：

$("#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 事件上清除整个选择框，它只是添加新选项或删除最后一个选项以获取指定数量的值。

- banrobert

---

和JohnP一样，您在parseInt表达式中忘记了',10)'。 - regilero

Answer 3

如果您想重新构建整个数组：

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

- Andrew Shepherd