Javascript 在数组中动态添加变量

我有一个脚本，可以将教育记录添加到我的数据库中。我的观点是，我想根据用户添加的值动态添加变量。下面是要显示的脚本和JSFIDLE示例

$(function() {
     var inc =1;
    $('.add').live('click',function(){

    var $val1= $('.val1').val();
     var $val2= $('.val2').val();
        var $val3= $('.val3').val();
        var $val4= $('.val4').val();
       var result = $val1 + $val2 +$val3 +$val4;

        var hiddin="get_val"+inc;
            var edu="edu"+inc;
        var grade="grade"+inc;
        var grp="grp"+inc;
        var colg="colg"+inc;
        //alert(hiddin);
        $('<div class='+hiddin+' style="display:block;">'+'<span class='+edu+'>'+$val1+'</span>'+'<span class='+grade+'>'+$val2+'</span>'+'<span class='+grp+'>'+ $val3 +'</span>' +'<span class='+colg+'>' +$val4 +'</span>'+ '</div>').appendTo('.wrap');

        // alert(result);
     var $val1= $('.val1').val('');
     var $val2= $('.val2').val('');
        var $val3= $('.val3').val('');
        var $val4= $('.val4').val('');
     inc++;
    });


    $('.submit').live('click',function(){

         var $edu1= $('.edu1').html();
            var $edu2= $('.edu2').html();
                 var $edu3= $('.edu3').html();
                 var $edu4= $('.edu4').html();
        var $grade1= $('.grade1').html();
            var $grade2= $('.grade2').html();
                 var $grade3= $('.grade3').html();
                 var $grade4= $('.grade4').html();
        var $grp1= $('.grp1').html();
            var $grp2= $('.grp2').html();
                 var $grp3= $('.grp3').html();
                 var $grp4= $('.grp4').html();

        var $colg1= $('.colg1').html();
            var $colg2= $('.colg2').html();
                 var $colg3= $('.colg3').html();
                 var $colg4= $('.colg4').html();

        alert($edu4 + $colg3 + $grp2 + $grade3);
    });
});

$（函数（）{
var inc=1；
$（'.add'）.live（'单击'，函数（））{
var$val1=$（'.val1'）.val（）；
var$val2=$（'.val2'）.val（）；
var$val3=$（'.val3'）.val（）；
var$val4=$（'.val4'）.val（）；
var结果=$val1+$val2+$val3+$val4；
var hiddin=“get_val”+inc；
var edu=“edu”+inc；
var grade=“grade”+inc；
var grp=“grp”+inc；
var colg=“colg”+inc；
//警惕（希丁）；
$（“”+“”+$val1+“”+“”+“”+$val2+“”+“”+$val3+“”+“”+$val4+“”+“”）。附录（“”.wrap'）；
//警报（结果）；
变量$val1=$（'.val1'）.val（''）；
var$val2=$（'.val2'）.val（''）；
var$val3=$（'.val3'）.val（''）；
var$val4=$（'.val4'）.val（''）；
inc++；
});
$（'.submit'）.live（'单击'，函数（））{
var$edu1=$（'.edu1'）.html（）；
var$edu2=$（'.edu2'）.html（）；
var$edu3=$（'.edu3'）.html（）；
var$edu4=$（'.edu4'）.html（）；
var$grade1=$（'.grade1'）.html（）；
var$grade2=$（'.grade2'）.html（）；
var$grade3=$（'.grade3'）.html（）；
var$grade4=$（'.grade4'）.html（）；
var$grp1=$（'.grp1'）.html（）；
var$grp2=$（'.grp2'）.html（）；
var$grp3=$（'.grp3'）.html（）；
var$grp4=$（'.grp4'）.html（）；
var$colg1=$（'.colg1'）.html（）；
var$colg2=$（'.colg2'）.html（）；
var$colg3=$（'.colg3'）.html（）；
var$colg4=$（'.colg4'）.html（）；
警报（$edu4+$colg3+$grp2+$grade3）；
});
});

以下是链接

---

请提供帮助

我建议您设置一些隐藏变量以跨越并获取值。像这样的

 $('<div class='+hiddin+' style="display:block;">'+'<span class='+edu+'><input type="hidden" name="edu[]" id="edu_'+inc+'" value="'+$val1+'" >'+$val1+'</span>'+'<span class='+grade+'><input type="hidden" name="grade[]" id="grade_'+inc+'" value="'+$val2+'" >'+$val2+'</span>'+'<span class='+grp+'><input type="hidden" name="group[]" id="group_'+inc+'" value="'+$val3+'" >'+ $val3 +'</span>' +'<span class='+colg+'><input type="hidden" name="college[]" id="college_'+inc+'" value="'+$val4+'" >' +$val4 +'</span>'+ '</div>').appendTo('.wrap');

---

请停止使用不推荐的

.live

方法，如果您有类似

val1

，

val2

。。。你通常做错事。另外，为什么要将这些变量命名为

$val1

等？它们甚至不包含jQuery对象，即使这样，这个命名方案也是有问题的。你的问题还不清楚。你想要实现什么？按“提交”时，所有选定元素的选定值。还是要从上一个select元素的选定值填充下一个select。你的代码也很混乱。请详细解释。

  <form id="save_form">
    <div class="wrap"> </div>
  </form> 

var data_save = $("#save_form").serialize(); 
alert(data_save);