SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cascading Selection Boxes (ebay style)

    Hi all, I already posted a similar thread in the HTML section, but to no avail. To be honest, what I require is JavaScript related.

    Has anyone here sold an item on ebay? If so, do you remember the selection boxes used when selecting the categories for which your item falls within? (not sure if they are actually called selection boxes, as they are not really drop down boxes, but an open box in which you can select an item)

    The 'selection' boxes work in that when you select an entry from one box, the next box is updated in relation to what was selected from the previous box etc etc.

    Anyway, I would like to implement something like this in a website project I am undertaking, and was wondering if anyone could direct me to an online tutorial somewhere. I have searched, but to no avail.

    Cheers

    Tryst

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hi Tyst

    I don't know of any tutorials on the subject but here's an example that might help. Don't take this as the ultimate or only way that this could be done because its probably not but at least it might give you somehwere to start.

    Copy it amd view it in a browser.

    Hope it helps.

    Code:
    <html>
    <body>
    <script type="text/javascript">
    var aParent1 = new Array();
    var aParent2 = new Array();
    var aParent3 = new Array();
    aParent1[0] = new Array('1', 'Parent 1 - Child 1');
    aParent1[1] = new Array('2', 'Parent 1 - Child 2');
    aParent1[2] = new Array('3', 'Parent 1 - Child 3');
    aParent2[0] = new Array('4', 'Parent 2 - Child 1');
    aParent2[1] = new Array('5', 'Parent 2 - Child 2');
    aParent2[2] = new Array('6', 'Parent 2 - Child 3');
    var aChild1 = new Array();
    var aChild2 = new Array();
    var aChild3 = new Array();
    var aChild4 = new Array();
    var aChild5 = new Array();
    var aChild6 = new Array();
    aChild1[0] = new Array('Child 1 - Option 1', 'Child 1 - Option 1');
    aChild1[1] = new Array('Child 1 - Option 2', 'Child 1 - Option 2');
    aChild1[2] = new Array('Child 1 - Option 3', 'Child 1 - Option 3');
    aChild1[3] = new Array('Child 1 - Option 4', 'Child 1 - Option 4');
    aChild1[4] = new Array('Child 1 - Option 5', 'Child 1 - Option 5');
    aChild1[5] = new Array('Child 1 - Option 6', 'Child 1 - Option 6');
    aChild2[0] = new Array('Child 2 - Option 1', 'Child 2 - Option 1');
    aChild2[1] = new Array('Child 2 - Option 2', 'Child 2 - Option 2');
    aChild2[2] = new Array('Child 2 - Option 3', 'Child 2 - Option 3');
    aChild3[0] = new Array('Child 3 - Option 1', 'Child 3 - Option 1');
    aChild3[1] = new Array('Child 3 - Option 2', 'Child 3 - Option 2');
    aChild3[2] = new Array('Child 3 - Option 3', 'Child 3 - Option 3');
    aChild4[0] = new Array('Child 4 - Option 1', 'Child 4 - Option 1');
    aChild4[1] = new Array('Child 4 - Option 2', 'Child 4 - Option 2');
    aChild4[2] = new Array('Child 4 - Option 3', 'Child 4 - Option 3');
    aChild5[0] = new Array('Child 5 - Option 1', 'Child 5 - Option 1');
    aChild5[1] = new Array('Child 5 - Option 2', 'Child 5 - Option 2');
    aChild5[2] = new Array('Child 5 - Option 3', 'Child 5 - Option 3');
    aChild6[0] = new Array('Child 6 - Option 1', 'Child 6 - Option 1');
    aChild6[1] = new Array('Child 6 - Option 2', 'Child 6 - Option 2');
    aChild6[2] = new Array('Child 6 - Option 3', 'Child 6 - Option 3');
    function loadSelect2(sItemId, iItemIndex, sTargetSelect)
    {
     var oCurArray = eval('aParent'+ iItemIndex);
     var iCurArrayCount = oCurArray.length;
     var oTargetSelect = document.getElementById(sTargetSelect);
     
     oTargetSelect.length = 0;
     
     var oNewOption = document.createElement("option");
     oTargetSelect.options.add(oNewOption);
     oNewOption.value = 'null_select';
     oNewOption.innerText = 'Select One';
     
     for (iCounter = 0; iCounter < iCurArrayCount; iCounter++)
     {
      var oNewOption = document.createElement("option");
      oTargetSelect.options.add(oNewOption);
      oNewOption.value = oCurArray[iCounter][0];
      oNewOption.innerText = oCurArray[iCounter][1];
     }
    }
    function loadSelect3(sItemId, iItemIndex, sTargetSelect)
    {
     var oCurArray = eval('aChild'+ iItemIndex);
     var iCurArrayCount = oCurArray.length;
     var oTargetSelect = document.getElementById(sTargetSelect);
     
     oTargetSelect.length = 0;
     
     var oNewOption = document.createElement("option");
     oTargetSelect.options.add(oNewOption);
     oNewOption.value = 'null_select';
     oNewOption.innerText = 'Select One';
     
     for (iCounter = 0; iCounter < iCurArrayCount; iCounter++)
     {
      var oNewOption = document.createElement("option");
      oTargetSelect.options.add(oNewOption);
      oNewOption.value = oCurArray[iCounter][0];
      oNewOption.innerText = oCurArray[iCounter][1];
     }
    }
    </script>
    
    <select name="select1" id="select1" style="width:200px;" onchange="loadSelect2(this.id, this.value, 'select2')">
     <option value="0">Select One</option>
     <option value="1">Parent Option 1</option>
     <option value="2">Parent Option 2</option>
    </select>
    <br>
    <select name="select2" id="select2" style="width:200px;" onchange="loadSelect3(this.id, this.value, 'select3')">
    </select>
    <br>
    <select name="select3" id="select3" style="width:200px;" onchange="alert(this.value)">
    </select>
    </body>
    </html>

  3. #3
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So if I was to add another selection box, I'd create another function called loadSelect3(param1, param2, param3) and adjust the <select> tag to update this function?

    Tryst

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep

    Or you could go to a tiny bit more effort and change the naming conventions of the load select functions so that you could do it all with the one function. As you can notice the only difference is in the way that they reference each array by name.

    Good Luck!

  5. #5
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I not sure, but I think each time I run the script within a webpage it is running an infinite loop as my computer runs REALLY slow, and my processor usage goes up to %100.

    Do you get this problem?

    Tryst

  6. #6
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Grahowler, is there any chance that you can comment out one of the function so that I can know what is going on there, please

    Tryst

  7. #7
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi grahowler,

    I beg your pardon for my bad english.

    looking for help for a Javascript that outo poppulate alookUp and find that you gave Tryst and I uses it, but when using it in fireFox works but it does not show the information, is possible to see that lookup fills but the labels are not seen

    what can I do?? , I'm a rocky with the web developing.
    tks


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
  •