Question

我有此功能可以将选项添加到选择列表：

 function addOption(selectbox, value, text, cl )
 {
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
if (cl==1){ optn.className = "nav_option_main"; }
selectbox.options.add(optn);
 }

我刚刚发现了“optgroup”标记，但我不知道如何将其实现到下拉列表中。

在另一个选择框“OnChange”事件上调用上面的函数，以使用所需选项填充子选择框。

我认为将“optgroup”标签添加到其中并不太难，或者是它？

谢谢，如果您需要更多输入，请告诉我......

UPDATE：

当触发您的功能Beejamin时，optgroup标签会相互复制。例如：

 Label
 Label
 Label
   optgroup.1
   optgroup.2
   optgroup.3
   etc...

感谢您的功能......但我该如何解决这个问题呢？

Answer 1

以下是一个例子：

http://www.spookandpuff.com/examples/optGroup.html

这里的功能 - 改编自你原来的功能：

   function addOption(selectbox, contents, cl )
    {

     var addNode = selectbox; //Cache the selectbox, in case we're only adding a single, ungrouped, option.
     if (contents.length > 1) { //If we're adding a group
       addNode = document.createElement("OPTGROUP"); //Set the node to add to to a new optgroup.
       addNode.label = contents[0]; //Use the first label (a string) as the group's label.
       contents.shift(); //Remove the label from the array (so it doesn't get re-used)
     }

      for (var i=0;i < contents.length;i++) {
        var optn = document.createElement("OPTION");
        optn.text = contents[i][0];
        optn.value = contents[i][1];
        if (cl==1){ optn.className = "nav_option_main"; }  
        addNode.appendChild(optn);  //Append this option to either the selectbox, or the group.
      }

     if (contents.length > 1) { //If we've just added a group, we need to add the group to the select box.
       selectbox.appendChild(addNode);
     }

  }

此版本接受参数'contents'，而不是'text'和'value'的单独参数 - 它接受一个或多个选项的数组。因此，要添加单个选项，而不是作为组的一部分，请执行以下操作：

var singleOption = [
    ['singleOption', 1]
  ];

addOption(document.getElementById('selector'), singleOption, 0);

contents数组中的项本身就是一个包含两个项的数组 - 文本和值。

如果您将多个这些堆叠到内容数组中，则创建一个optGroup：

var optionGroup1 = [
    'Group Title',
    ['groupOne.one', 1],
    ['groupOne.two', 2],
    ['groupOne.three', 3],
    ['groupOne.four', 4],
    ['groupOne.five', 5]
  ];

addOption(document.getElementById('selector'), optionGroup1, 0);

第一项是该组的标题，之后，它只是重复与单项相同的内容。当该功能检测到您尝试一次添加多个时，它会将它们组合在一起。

这就是你要追求的吗？

Answer 2

var optgroups = new Array();

function addOptgroup(selectbox, label){

    optgroups[label] = document.createElement("optgroup");
    optgroups[label].label = label;
    selectBox.appendChild(optgroups[label]);

}


 function addOption(selectbox, value, text, cl, optgroupLabel  )
 {
      var optn = document.createElement("OPTION");
      optn.text = text;
      optn.value = value;
      if (cl==1){ optn.className = "nav_option_main"; }

      if(optgroupLabel  ){
          optgroups[optgroupLabel].appendChild(optn);
      }
      else{
          selectbox.appendChild(optn);
      }
 }

聪明的“添加标签”javascript帮助需要

2 个答案: