[JS] Meerdere soorten acties toekennen aan 1 dropdown

[Reveller]

Ik vind dat GMail een hele prettige interface heeft. Vooral de "actions" dropdown vind ik handig. In 1 dropdown staan opties om labels toe te kennen, emails te deleten, etc. Ik probeer nu zoiets na te maken voor mijn cms, pseuso:

JavaScript:

function takeAction(optionValue) {
  switch (optionValue) {
    case 'optgroup select':
      selectCheckboxes(optionValue);
      break;
    case 'optgroup add':
      document.location = 'add?type=' + optionValue;
     break;
    case 'optgroup other':
      form.elements['edit['+ optionValue +']'].value = '1';
      form.submit();
  }
}

met bijvoorbeeld de volgende html. Zoals je ziet wil ik een andere soort actie bij elke optgroup.

HTML:

<label for="type">Action:</label>
<select onchange="takeAction(this)">
  <option value="ignore">choose...</option>
  <optgroup label="select">
    <option value="none">none</option>
    <option value="article">article</option>
    <option value="product">product</option> <!-- 1 -->
    <option value="sidecontent">sidecontent</option>
    <option value="promote">promoted</option>
  </optgroup>
  <optgroup label="add">
    <option value="article">article</option>
    <option value="product">product</option>
    <option value="sidecontent">sidecontent</option>
  </optgroup>
  <optgroup label="other">
    <option value="promote">promote</option> <!-- 2 -->
    <option value="sticky">make sticky</option>
    <option value="delete">delete</option>
  </optgroup>
</select>

Als iemand dus op option "1" klikt, moet ik in de switch statement op regel 4 uitkomen en als iemand optie 2 selecteert, op regel 10. Weet iemand hoe ik van een geselecteerde optie kan zien tot welke optgroup deze behoort? En als dat niet mogelijk is, hoe zou ik dit dan kunnen oplossen?

[RobIII]

selectedIndex
En wat boeit die optgroup? Kwestie van unieke acties unieke namen geven. Dat je ze voor de presentatie in optgroups gooit is leuk, maar boeit verder toch niet?

Of prefixen met de optgroup...

HTML:

<label for="type">Action:</label>
<select onchange="takeAction(this)">
  <option value="">choose...</option>
  <optgroup label="select">
    <option value="select_none">none</option>
    <option value="select_article">article</option>
    <option value="select_product">product</option> <!-- 1 -->
    <option value="select_sidecontent">sidecontent</option>
    <option value="select_promote">promoted</option>
  </optgroup>
  <optgroup label="add">
    <option value="add_article">article</option>
    <option value="add_product">product</option>
    <option value="add_sidecontent">sidecontent</option>
  </optgroup>
  <optgroup label="other">
    <option value="promote">promote</option> <!-- 2 -->
    <option value="sticky">make sticky</option>
    <option value="delete">delete</option>
  </optgroup>
</select>

En anders met DOM de optgroup zien te achterhalen

[ Voor 186% gewijzigd door RobIII op 17-11-2008 14:53 ]

[Reveller]

Dus zoiets:

JavaScript:

function takeAction(option) {
  var option = option.split('_');
  switch (option[0]) {
    case 'select':
      selectCheckboxes(option[1]);
      break;
    case 'add':
      document.location = 'add?type=' + option[1];
     break;
    case 'other':
      form.elements['edit['+ option[1] +']'].value = '1';
      form.submit();
  }
}