Question

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

我的问题是我需要知道每个属性有多少选项。我尝试使用var counter=$('.class-name').next().val();尝试计算它们alert(counter);以查看它是否有效。但我得到的是一个未定义的警报，因此var计数器没有被初始化。

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

这是fiddle！

Answer 1

以下是获取每个选项的长度的代码。

$('.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

Fiddle

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

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>";

并且

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

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

1 个答案: