Javascript 计算表单提交的附加元素数

我有一个动态表单的网页。它允许用户为设备指定任意数量的属性。这些属性可以是选择选项列表。当用户选择此选项时，将向他们显示一个按钮以添加选项

我的问题是，我需要知道每个属性有多少个选项。我尝试过使用

var counter=$（'.class name'）.next（）.val（）尝试计数它们
警报（计数器）
查看它是否有效。但是我得到的只是一个未定义的警报，所以var计数器没有被初始化

我需要知道每个选择列表的选项数量，以便能够将它们组合在一起，并知道哪些选项与特定属性匹配。我想不出通过JS或PHP实现这一点的方法。我可以在php中发布选项，但我无法确定每个属性都包含哪些选项

这里有一个
 以下是获取每个选项的长度的代码

$('.tattribute option:selected[value="text"]').length
$('.tattribute option:selected[value="checkbox"]').length
$('.tattribute option:selected[value="select-list"]').length
$('.tattribute option:selected[value="notes"]').length


这里是一个添加了隐藏字段的提琴，用于跟踪选项计数。每次添加或删除选项时，隐藏字段的值都会递增或递减。下面的代码中有更改

var template="<div class=\"new-attribute\">"
                 + "<h3>New Attribute</h3>"
                 + "<label for=\"attributeName[]"+"\">Name:</label>"
                 + "<input class=\"attribute\" type=\"text\" name=\"attributeName[]"+"\">"
                 + "<input class=\"attribute_count\" type=\"hidden\" name=\"attributeCount[]"+"\">"
                 + "<label for=\"attributeType[]"+"\">Type:</label>"
                 + "<select class=\"tattribute\" name=\"attributeType[]"+"\">"
                 + "<option value=\"text\" selected>Text</option>"
                 + "<option value=\"checkbox\">Checkbox</option>"
                 + "<option value=\"select-list\">Select Option List</option>"
                 + "<option value=\"notes\">Notes</option>"
                 + "</select>"
                 + "<div class=\"option\"></div>"
                 + "<button type=\"button\" class=\"remove\">Delete</button>"
                 + "</div>";

var template=“”
+“新属性”
+“姓名：”
+ ""
+ ""
+“类型：”
+ ""
+“文本”
+“复选框”
+“选择选项列表”
+“注释”
+ ""
+ ""
+“删除”
+ "";

及

//添加操作
$（“#属性”）。在（'click'，'.btn'，函数（）{
add=“名称：”
+ ""
+“删除”；
$（此）。在（添加）之后；
//计算选项数
$opt=$（this）.closest（“.option”）
$opt.sides（'.attribute_count'）.val（$opt.find（'.op'）.length）
警报（$opt.sides（'.attribute_count'）.val（））；
});
//删除输入
$（“#属性”）。在（'单击'，'上。删除选项'，函数（）{
$（this）.closest（'.op'）.remove（）；
$opt=$（this）.closest（“.option”）
$opt.sides（'attribute_count'）.val（$opt.find（'.op'）.length）
});
将长度输出到console仍然无法让我识别哪些选项与特定属性匹配。提交页面时，将有多个选项和多个属性。我需要把它们搭配起来。你的帖子解决不了我的问题。
//Add action
    $("#attributes").on('click', '.btn', function () {
        add = "<div class=\"op\"><label for=\"attributeOption[]" +"\">Name:</label>" 
        + "<input class=\"option-input\" type=\"text\" name=\"attributeOption[]" + "\">"
        +"<button type=\"button\" class=\"remove-option\">remove</button></div>";
        $(this).after(add); 
        //COUNT NUMBER OF OPTIONS
        $opt = $(this).closest('.option')
        $opt.siblings('.attribute_count').val($opt.find('.op').length)
        alert($opt.siblings('.attribute_count').val());
    });

    //Remove input
    $("#attributes").on('click', '.remove-option', function () {
            $(this).closest('.op').remove();
            $opt = $(this).closest('.option')
            $opt.siblings('attribute_count').val($opt.find('.op').length)
    });