JS jQuery語法添加optgroup字段標籤

Question

我正在建立一個嵌套的表達式生成器。第一步，我有一個很長的選項列表（下面提供的列表的小樣本）。

什麼我目前得到的下拉

什麼我的目標在下拉

我怎麼會去在下面寫一個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（子操作符不包含在示例中））。下面是我想要做什麼......

• 我寧願創建「成員屬性」作爲一個選擇組

• 這將允許我創建運營商和選項進行的：var []，運營商爲OPTGROUP內每個選項的如何輸出應在HTML呈現

  {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"}, 
  ] 
  

例

<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/