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

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

基本上，每次有keydown时清除选择框并重新填充它。您可以通过添加一些检查来查看它是否是相同的值

来进一步优化它

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

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

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

3 个答案: