[thelist] Javascript to alter a select list

Jeff Howden jeff at jeffhowden.com
Wed Jul 13 13:28:11 CDT 2005


Rod,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: raanders at mailporter.net
> 
> <select name="PlanID" id="PlanID">
>   <optgroup label="Kidding Plans"
>             name="NoKidding" id="NoKidding">
>     <option value="15">No Kidding 1</option>
>     <option value="16">No Kidding 2</option>
>   </optgroup>
> </select>
> 
> <input type="text" name="PromoCode" id="PromoCode"
>        class="val" size="15"
>        onchange="chkPromo(this)" />
> 
> What I'd like is to have chkPromo() look at a list of
> Promo Codes and depending on the entry add an optgroup
> with label etc. that has two options with all their
> bells and whistles.
> 
> Here is how I'm kludging it now -- warts and all.
> function chkPromo ( promocode ) {
> 
> if (promocode.value.length > 0) {
>    switch (promocode.value.toLowerCase() ) {
>    case 'promo05':
>      promo = new Option("No Kidding Plan 3", 29);
>      document.forms['SignUp'].PlanID.options[2] = promo;
>      promo = new Option("No Kidding Plan 4", 30);
>      document.forms['SignUp'].PlanID.options[3] = promo;
>      document.forms['SignUp'].PlanID.value = 29;
>      document.forms['SignUp'].PromoCode.value = '';
>      break;
>   case 'promo08':
>      promo = new Option("Just Kidding Plan 6", 31);
>      document.forms['SignUp'].PlanID.options[2] = promo;
>      promo = new Option("Just Kidding Plan 7", 32);
>      document.forms['SignUp'].PlanID.options[3] = promo;
>      document.forms['SignUp'].PlanID.value = 31;
>      document.forms['SignUp'].PromoCode.value = '';
>      break;
>   default:
>      promo = 0;
>      promocode.value = '';
>      alert ('Sorry this is not a valid Promotion 
> Code.\nPlease select a 
>          plan or enter a promotion code.');
>      document.SignUp.PlanID.options[3] = null;
>      document.SignUp.PlanID.options[2] = null;
>      SignUp.PlanID.focus();
>      return false;
>      }
>    }
> }
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

I'm not sure about the browser support for adding an OPTGROUP via script,
but I can tell you that there *are* browsers that have issues with adding
options using the "new Option()" constructor.  Additionally, the "value"
attribute of a SELECT is a browser-specific extension. You're better off
determining the index of the option you wish to select and selecting that
option via the selectedIndex property.  That aside, here's how I'd attempt
it:

var promo = new Object();
    promo['promo05'] = ['No Kidding'
                       , [
                           ['No Kidding Plan 3', 29]
                         , ['No Kidding Plan 4', 30]
                         ]
                       ];
    promo['promo08'] = ['Just Kidding'
                       , [
                           ['Just Kidding Plan 6', 31]
                         , ['Just Kidding Plan 7', 32]
                         ]
                       ];

Promos are defined as in object with the promo code as the index.  Each
promo is made up of a 3 dimensional array.  The first position of the first
level is the label of the OPTGROUP.  The second position of the first level
is an array of arrays where each 3rd level array holds the text of the
option in the first position and the value of the option in the second
position.

With our promos defined, we can now write a generic function for adding an
OPTGROUP and its associated OPTIONs.

function addOptgroup(oSelect, oData)
{
  var returnValue = null;
  var i = 0;
  if(oSelect && oData)
  {
    oOptgroup = document.createElement('OPTGROUP');
    oOptgroup.label = oData[0];
    for(i = 0; i < oData[1].length; i++)
    {
      oOption = document.createElement('OPTION');
      oOptgroup.appendChild(oOption);
      oOption.text = oData[1][i][0];
      oOption.value = oData[1][i][1];
    }
    oSelect.appendChild(oOptgroup);
    returnValue = oOptgroup;
  }
  return returnValue;
}

With our new addOptgroup() function, we need to make some changes to our
chkPromo() function.

function chkPromo(promocode)
{
  if(promocode.value.length > 0)
  {
    if(promo[promocode.value.toLowerCase()])
    {
      oOptgroup =
document.forms['SignUp'].PlanID.getElementsByTagName('OPTGROUP');
      if(oOptgroup && oOptgroup[0])
        oOptgroup[0].removeNode(true);
      oOptgroup = addOptgroup(document.forms['SignUp'].PlanID,
promo[promocode.value]);
      document.forms['SignUp'].PlanID.selectedIndex = 0;
      document.forms['SignUp'].PromoCode.value = '';
    }
    else
    {
      oOptgroup =
document.forms['SignUp'].PlanID.getElementsByTagName('OPTGROUP');
      if(oOptgroup && oOptgroup[0])
        oOptgroup[0].removeNode(true);
      alert('Sorry this is not a valid Promotion Code.\n'
          + 'Please select a plan or enter a promotion code.');
      document.forms['SignUp'].PromoCode.focus();
    }
  }
}

Good luck,

 [>] Jeff Howden
     jeff at jeffhowden.com
     http://jeffhowden.com/



More information about the thelist mailing list