Javascript 表单字段分组数组

我正在努力使Make/Model/Year表单正常运行。。。虽然我的UI部分工作得很好。。。在重审结果时，我被难住了

生成的字段如下所示：

<div class="input-group">
    <input type="text" placeholder="Vehicle Model for This Make" id="PartVehModel0" name="PartVehModel[Chevy]" class="form-control">
    <span style="cursor:pointer;" onclick="$(this).parent().remove();$('#vYear' + $(this).parent().find('input').val()).remove();" class="input-group-addon"><i class="fa fa-fw fa-minus-square-o"></i></span>
    <span onclick="addChildGroup($(this).parent().find('input'), 2, '#vYear');" style="cursor:pointer;" class="input-group-addon"><i class="fa fa-chevron-right fa-fw"></i></span>
</div>
<div class="input-group">
    <input type="text" placeholder="Vehicle Model for This Make" id="PartVehModel1" name="PartVehModel[Chevy]" class="form-control">
    <span style="cursor:pointer;" onclick="$(this).parent().remove();$('#vYear' + $(this).parent().find('input').val()).remove();" class="input-group-addon"><i class="fa fa-fw fa-minus-square-o"></i></span>
    <span onclick="addChildGroup($(this).parent().find('input'), 2, '#vYear');" style="cursor:pointer;" class="input-group-addon"><i class="fa fa-chevron-right fa-fw"></i></span>
</div>

从以下表格：

我的目标是：

var $ct = 0;
function addFormField(which, initialEle, val){
var $nField;
$iEle = $(initialEle);
$iEle.find('i').removeClass('fa-plus-square-o');
$iEle.find('i').addClass('fa-minus-square-o');
switch(which){
    case 1: // make
        $iEle.attr('onclick', '$(this).parent().remove();$(\'#vModel\' + $(this).parent().find(\'input\').val()).remove();');
        $nField = '<div class="input-group"><input type="text" class="form-control" name="PartVehMake[]" id="PartVehMake'+$ct+'" placeholder="Vehicle Make for This Part" /><span class="input-group-addon" onclick="addFormField(1, this);" style="cursor:pointer;"><i class="fa fa-plus-square-o fa-fw"></i></span><span class="input-group-addon" style="cursor:pointer;" onclick="addChildGroup(\'#PartVehMake'+$ct+'\', 1, \'#vModel\');"><i class="fa fa-chevron-right fa-fw"></i></span></div>';                     
        $('#vMake').append($nField);
        $ct++;
        break;  
    case 2: // model
        $iEle.attr('onclick', '$(this).parent().remove();$(\'#vYear\' + $(this).parent().find(\'input\').val()).remove();');
        $nField = '<div class="input-group"><input type="text" class="form-control" name="PartVehModel['+val+']" id="PartVehModel'+$ct+'" placeholder="Vehicle Model for This Make" /><span class="input-group-addon" onclick="addFormField(2, this, \'' + val + '\');" style="cursor:pointer;"><i class="fa fa-plus-square-o fa-fw"></i></span><span class="input-group-addon" style="cursor:pointer;" onclick="addChildGroup($(this).parent().find(\'input\'), 2, \'#vYear\');"><i class="fa fa-chevron-right fa-fw"></i></span></div>';                     
        $('#' + $iEle.parent().parent().attr('id')).append($nField);
        $ct++;
        break;  
    case 3: // year
        $iEle.attr('onclick', '$(this).parent().remove();');
        $nField = '<div class="input-group"><input type="text" class="form-control" name="PartVehYear['+val+']" id="PartVehYear'+$ct+'" placeholder="Vehicle Year for This Model" /><span class="input-group-addon" onclick="addFormField(3, this, \'' + val + '\');" style="cursor:pointer;"><i class="fa fa-plus-square-o fa-fw"></i></span></div>';                     
        $('#' + $iEle.parent().parent().attr('id')).append($nField);
        $ct++;
        break;
}
}
var $ct1 = 0;
function addChildGroup(val, which, where){
var $val = $(val).val();
var $whr = $(where);
var $nField;
if($val.length > 0){
    switch(which){
        case 1: //model
            $whrID = where.replace('#', '') + $val;
            $nField = '<div class="input-group"><input type="text" class="form-control" name="PartVehModel[' + $val + ']" id="PartVehModel'+$ct1+'" placeholder="Vehicle Model for This Make" /><span class="input-group-addon" onclick="addFormField(2, this, \'' + $val + '\');" style="cursor:pointer;"><i class="fa fa-plus-square-o fa-fw"></i></span><span class="input-group-addon" style="cursor:pointer;" onclick="addChildGroup($(this).parent().find(\'input\'), 2, \'#vYear\');"><i class="fa fa-chevron-right fa-fw"></i></span></div>';                     
            $whr.append('<div id="' + $whrID + '"><h5 style="margin-top:10px;">' + $val + '<span class="fa fa-minus pull-right" style="cursor:pointer;" onclick="$(\'#' + $whrID + '\').remove();"></span></h5>' + $nField + '</div>');
            $ct1++;
            break;
        case 2: //year
            $whrID = where.replace('#', '') + $val;
            $nField = '<div class="input-group"><input type="text" class="form-control" name="PartVehYear[' + $val + ']" id="PartVehYear'+$ct1+'" placeholder="Vehicle Year for This Model" /><span class="input-group-addon" onclick="addFormField(3, this, \'' + $val + '\');" style="cursor:pointer;"><i class="fa fa-plus-square-o fa-fw"></i></span></div>';                     
            $whr.append('<div id="' + $whrID + '"><h5 style="margin-top:10px;">' + $val + '<span class="fa fa-minus pull-right" style="cursor:pointer;" onclick="$(\'#' + $whrID + '\').remove();"></span></h5>' + $nField + '</div>');
            $ct1++;
            break;  
    }
}
}

var$ct=0；
函数addFormField（which，initialEle，val）{
var$nField；
$iEle=$（首字母缩写）；
$iEle.find（'i'）。removeClass（'fa-plus-square-o'）；
$iEle.find（'i'）.addClass（'fa-减号-square-o'）；
开关（哪个）{
案例1://制造
$iEle.attr（'onclick'，'$（this.parent（）.remove（）；$（\'\\\'vModel\'+$（this.parent（）.find（\'input\'）.val（））.remove（）；'）；
$nField=''；
$（'#vMake'）。追加（$nField）；
$ct++；
打破
案例2://模式
$iEle.attr（'onclick'，'$（this.parent（）.remove（）；$（\'\\'vYear\'+$（this.parent（）.find（\'input\'）.val（））.remove（）；'）；
$nField=''；
$（'#'+$iEle.parent（）.parent（）.attr（'id'））.append（$nField）；
$ct++；
打破
案例3://年份
$iEle.attr（'onclick'，'$（this.parent（）.remove（）；）；
$nField=''；
$（'#'+$iEle.parent（）.parent（）.attr（'id'））.append（$nField）；
$ct++；
打破
}
}
风险值$ct1=0；
函数addChildGroup（val，which，where）{
var$val=$（val）.val（）；
var$whr=$（其中）；
var$nField；
如果（$val.length>0）{
开关（哪个）{
案例1://模型
$whrID=where.replace（'#'，''）+$val；
$nField=''；
$whr.追加（''+$val+''+$nField+''）；
$ct1++；
打破
案例2://年份
$whrID=where.replace（'#'，''）+$val；
$nField=''；
$whr.追加（''+$val+''+$nField+''）；
$ct1++；
打破
}
}
}

---

那么，我如何才能让这个“分组”功能发挥作用呢？

您需要在表单中使用数组语法：

name="PartVehModel[Chevy][]"

---

name=“PartVehModel[Chevy][]”

注意额外的括号您看到额外的括号了吗？或者你是说我需要多放些啤酒？啊哈。想加上这个作为答案吗

name="PartVehModel[Chevy][]"