Нужна умная помощь по добавлению тега в javascript

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

  }

Эта версия принимает параметр «содержание», а не отдельные параметры для «текст» и «значение» - это принимает массив из одного или нескольких параметров. Итак, чтобы добавить один параметр, а не как часть группы, сделайте следующее:

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

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

Элемент в массиве содержимого сам по себе является массивом из двух элементов - текста и значения.

Если вы сложите более одного из них в массив содержимого, вы создадите 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);
      }
 }