Question

我正在构建一个嵌套表达式构建器。对于第一步，我有一个很长的OPTION列表（下面提供的列表的小样本）。

我目前在下拉菜单中获得了什么 current dropdown

target result dropdown 我打算在下拉列表中创建的内容

我将如何在下面编写OPTGROUP：

function initializeConditions() {
    conditions.conditionsBuilder({
    fields: [      
        {label: "Name", name: "nameField", operators: [
            {label: "is present", name: "present", fieldType: "none"},
            {label: "is blank", name: "blank", fieldType: "none"},
            {label: "is equal to", name: "equalTo", fieldType: "text"},
            {label: "is not equal to", name: "notEqualTo", fieldType: "text"},
        ]},

        {label: "Age", name: "ageField", operators: [                                            
            {label: "is present", name: "present", fieldType: "none"},
            {label: "is blank", name: "blank", fieldType: "none"},
            {label: ...so on & so on...
        ]},

        {label: "Member Attribute", name: "membAttributeField", options: membAttributeOptions, operators: [
            {label: "Age", name: "ageField", fieldType: "select"},
            {label: "Birthday", name: "birthdayField", fieldType: "select"},
            {label: "Gender", name: "genderField", fieldType: "select"},
            {label: "Suburb", name: "suburbField", fieldType: "select"},
            ...,
            ...,
            ...,
            {label: "Email", name: "emailField", fieldType: "select"},
        ]

    ],
    data: {"all": [
        {name: "nameField", operator: "equalTo", value: "Ron Burgundy"},
        {name: "ageField", operator: "greaterThanEqual", value: "43"}
    ]}
  });
}

好的，所以你可以看到我已经得到了这个字段，运算符和选项列表（以及var（样本中未包含的子运算符））。这就是我想做的事情......

我宁愿创建＆＃34;会员属性＆＃34;作为选择组

这将允许我继续创建运算符和选项：var []，OPTGROUP中每个选项的运算符

{label: "Member Attribute", name: "membAttributeField", options: membAttributeOptions, operators: [
    {label: "Age", name: "ageField", fieldType: "select"},
    {label: "Birthday", name: "birthdayField", fieldType: "select"},
    {label: "Gender", name: "genderField", fieldType: "select"},
    ...,
    ...,
    ...,
    {label: "Email", name: "emailField", fieldType: "select"},
]

如何在HTML中显示输出的示例

<select name"membAttributeField">
    <optgroup label="Member Attribute">
        <option name="ageField">Age</option>
        <option name="birthdayField">Birthday</option>
        <option name="genderField">Gender</option>
        ...,
        ...,
        ...,
        <option name="emailField">Email</option>
    </optgroup>
    <optgroup label="Membership (Status)"> 
        <option name="newMemberField">New</option>
        <option name="expiredMemberField">Expiration</option>
        ...,
        ...,
        <option name="renewMemberField">Renewed</option>
        </optgroup>
    <optgroup label="Membership (General Activity)">

Answer 1

您发布了正在寻找的输出图片，这很有帮助。我想我明白你要做什么。这是我将如何做到这一点（这是略微简化，但希望它给你的图片）：

var groups = [
    { name: 'Member Attributes', options: [
        { name: 'ageField', label: 'Age' },
        { name: 'birthdayField', label: 'Birthday' },
        { name: 'genderField', label: 'Gender' },
        //...
    ] },
    { name: 'Membership Status', options: [
        { name: 'newMembershipField', label: 'New Membership' },
        { name: 'expiredMemberField', label: 'Membership Expiration' },
        //...
    ] },
    { name: 'Member General Activity', options: [
        { name: 'lastFacilitiesEntryField', label: 'Last Facilities Entry' },
        { name: 'lastClassAttendance', label: 'Last Class Attendance' },
        //...
    ] },
    //...
];

我不知道你是如何计划将这些结构转换为HTML的，但这是我用jQuery做的方法：

groups.forEach(function(group){
     var $optgroup = $('<optgroup label="' + group.name + '">');
     group.options.forEach(function(option){
         $optgroup.append('<option name="' + option.name + '">' + 
             option.label + '</option>');
     });
     $('select').append($optgroup);
});

这是一个有效的jsFiddle：http://jsfiddle.net/u25TM/

用于将optgroup添加到字段标签的JS Jquery语法

1 个答案: