SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Omaha, NE
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb javascript question on dynamic select boxes

    Question: How hard is the following to do in javascript and does anyone have a good example of this in use (aka how do you do it? )

    4 drop down boxes all on one page. I have 4 items in the list of the first drop down box.

    Red
    Blue
    Green
    Orange

    When I select one, I want the choice to be taken out of the list for the second drop down box. So if I select Blue in Drop Down #1, Drop Down #2 now has the option of

    Red
    Green
    Orange

    If I select Red from the list the Drop Down #3 now has

    Green
    Orange


    Then if i select Orange, the last drop down has only one value and that is Green.

    I hope that makes sense.

    I look forward to your input!

    thanks

    EPAISLEY

  2. #2
    SitePoint Guru
    Join Date
    Jan 2001
    Location
    Alkmaar, Netherlands
    Posts
    710
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up tested in IE 6

    <form name="frm" method="post" action="">
    <p>First:
    <select name="selectFirst" onChange="ChangeSecondSelect(this.form);">
    <option value="blue">blue</option>
    <option value="red">red</option>
    <option value="orange">orange</option>
    </select>
    </p>
    <p>Second:
    <select name="selectSecond">
    </select>
    </p>
    </form>
    <script Language="Javascript">
    arrSS = new Array(3); // Number of elements in first select box
    //------Which options will appear in second select box-------
    arrSS[0] = new Array("Red", "Green", "Orange"); //If first element is selected in first select box
    arrSS[1] = new Array("Green", "Orange"); //If second element is selected in first select box
    arrSS[2] = new Array("Green"); //If third element is selected in first select box
    function ChangeSecondSelect(frmName){
    frmName.selectSecond.options.length = 0; //clear options from second select
    if (frmName.selectFirst.selectedIndex >= 0){
    optionsSecond = arrSS[frmName.selectFirst.selectedIndex]; //get array for second select
    for (i = 0; i < optionsSecond.length; i++){ //add one by one to second list
    anOption = optionsSecond[i];
    frmName.selectSecond.options[i] = new Option( anOption, anOption );
    }
    }
    }
    ChangeSecondSelect(document.frm); // lets initialize for our first option
    </script>

  3. #3
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or try this.

    I saw the other day at w3schools.com.

    With just a little tweaking (change the event to occur when a selection is made in the 1st option menu and naming the 2nd select menu form element in the script instead) I'm sure it'll do the trick

    Just set up a series of little scripts that cascade.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  4. #4
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Omaha, NE
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My mistake

    thank you guys so much for your help! Both of those examples have been very helpful and I have learned alot.

    Unfortuantly I think i asked the wrong question, after reexamining what I want to do, I would like to d the following:

    I have two drop down select boxes

    Box1:

    Red
    Green
    Blue

    Box 2:
    Purple
    Orange
    Yellow


    What I want to do is have my third drop down box be populated with the selections (only one, not multiple) of the two boxes above. Is that possible with javascript?

    So if Box 1 = Red and Box 2 = Yellow Then box 3 would have Red, Yellow to choose from as options in the select box.

    Thanks

    EPAISLEY

  5. #5
    SitePoint Guru
    Join Date
    Jan 2001
    Location
    Alkmaar, Netherlands
    Posts
    710
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello again,
    Yeah it is possible of course, just check the code I have sent to you and modify it for your purposes.

    I can do it for you but you will learn not much and when you need another change you will ask again.

    Best Regards

  6. #6
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    what you want is a March Madness script
    see this thread

    or the "Cascading Selects (I & II)" scripts/tutorials at my site

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •