[thelist] Javascript to alter a select list

raanders at mailporter.net raanders at mailporter.net
Tue Jul 12 17:53:47 CDT 2005


Christian Heilmann wrote:

> It might be helpful not to  tell us about all the cool things you have
> done, but  really explain what you mean by "building select lists with
> option groups"?

A slight case of frustration and not really wanting to ask ( or 
expecting ) code.

> Do you mean dynamically generating them from an associated array, a
> list of objects or do you  mean  dynamic lists where changing one will
> change the other or what?
> 
> My (still) current article on ALA deals with complex lists and
> approaches the issue in another way, via  nested lists (1) and bobby
> van der sluis has released some unobtrusive select scripts (2).

Ah I thought I recognized the name.  Just finished reading it again -- 
the last time a month ago or so -- and used some of the things I read in 
it for my current kludgy code.

> Generally on scripting, wait a bit, we are on to something there, for
> the time being  check the tutorials listed on obsoletely famous (3).
> There are many bad bad resources on JavaScript out there, beware.

Tell me ... for sure.  I tried many code examples with little success.

> (1) http://www.alistapart.com/articles/complexdynamiclists/

Like above been there done that but not what I'm looking for.

> (2) http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.php

Interesting but doesn't look quite right.

> (3) http://icant.co.uk/of/feeds.php?t=js

Into the bookmarks this goes.

Ok I'll cave ( and be embarrased. )  Here is an obfuscated piece of the 
HTML.

<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" class="val" name="PromoCode"  id=PromoCode
         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;
     }
   }
}


Clue sticks at the ready!  Whack!


Rod
-- 

---
[Certified Virus free by MailPorter Mail Services.    www.MailPorter.com ]



More information about the thelist mailing list