Jquery未获取当前元素值

我正在使用jQuery1.9版本附加带有逗号分隔的文本框元素。 这是我的jquerycode

var str=$("to1").val();
    $("#sup").on('change',function(){
        if($("#sup").val()!=""){
            if(str == undefined){
            //alert('here');
            str="";
            str+=$(this).val();
            $("#to1").val(str);
            }else{
            console.log(str);
            str+=","+$(this).val();
            $("#to1").val(str);
            }       
        }
    });

但当我通过退格删除一个电子邮件id并选择另一个电子邮件id时，它会附加上一个

这是我的名片

---

如何将其附加到当前电子邮件列表中

变量

str

必须在

change

处理程序中声明，问题是对文本字段所做的任何手动更改都不会更新

str

变量

$(function () {
    $("#sup").on('change', function () {
        var str = $("#to1").val();
        if ($("#sup").val() != "") {
            if (str == undefined) {
                //alert('here');
                str = "";
                str += $(this).val();
                $("#to1").val(str);
            } else {
                console.log(str);
                str += "," + $(this).val();
                $("#to1").val(str);
            }
        }
    });
});

演示：

还处理不需要逗号的第一项

$('#sup').change( function() {
    if ($(this).val() != '') {
        if ($('#to1').val() != "")
            $('#to1').val($('#to1').val() + ', ' + $(this).val());
        else
            $('#to1').val($(this).val());
    }
});

---

它可以工作，但我想像我的示例一样用逗号附加电子邮件id。@user1567682在

var str=$（“#to1”）.val（）中错过了