/    Sign up×
Community /Pin to ProfileBookmark

List Boxes

Copy linkTweet thisAlerts:
Feb 14.2004

Hi There i Have 3 list boxes,

What i’m hopping to do is this,

Whith list box one (left) list animals, when select an animal, the second list box (middle) shows a list of things you can buy the animal, then you can select as meany items as you would like that would appear in the 3rd list box (right).

The thing is i want to do all this using images of arrors. to move up and down and left to right.

[code=php]
<form name=”form1″ method=”post” action=””>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”25%”>
<select name=”select” size=”9″>
<option>Cat</option>
<option selected>Dog</option>
<option>Fish</option>
<option>Bird</option>
<option>Other</option>
</select></td>
<td width=”25%”>
<table width=”30%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td colspan=”2″><div align=”center”><img src=”images/up.jpg” width=”50″ height=”50″>
</div>
<div align=”right”></div></td>
</tr>
<tr>
<td width=”25%”><img src=”images/back.jpg” width=”50″ height=”50″></td>
<td width=”34%”><img src=”images/forward.jpg” width=”50″ height=”50″></td>
</tr>
<tr>
<td colspan=”2″><div align=”center”><img src=”images/down.jpg” width=”50″ height=”50″></div></td>
</tr>
</table></td>
<td width=”25%”>
<select name=”select2″ size=”9″>
<option>—–First Items For Anmimal—-</option>
</select></td>
<td width=”25%”>
<table width=”30%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td colspan=”2″><div align=”center”><img src=”images/up.jpg” width=”50″ height=”50″>
</div>
<div align=”right”></div></td>
</tr>
<tr>
<td width=”25%”><img src=”images/back.jpg” width=”50″ height=”50″></td>
<td width=”34%”><img src=”images/forward.jpg” width=”50″ height=”50″></td>
</tr>
<tr>
<td colspan=”2″><div align=”center”><img src=”images/down.jpg” width=”50″ height=”50″></div></td>
</tr>
</table></td>
<td width=”25%”>
<select name=”select3″ size=”9″>
<option>——Item For Your Animal——-</option>
</select></td>
</tr>
</table>
</form>
[/code]

Does anyone have any ideas on how to do this.?

to post a comment
JavaScript

20 Comments(s) ↴

Copy linkTweet thisAlerts:
@oleragFeb 15.2004 — 
  • 1. You can use pre-filled arrays to populate the second list

    box when a selection from the first is made, but first you'll

    need to explain what values are to be populated if..

    a) Cat

    b) Dog

    c) Fish

    d) Bird

    e) Other (this could be alot of animals)


  • 2. I have no clue what the third list represents so you'll need

    to give a better explanation for that one.
    • Copy linkTweet thisAlerts:
    @RedheadauthorFeb 15.2004 — Ok I was thinking the First List

    Cats

    Dog

    Fish

    Bird

    Loss (other)

    Second List when user selects Cats for an example

    Toy Mouse

    Food

    Litter

    Treats

    The Third Box would be what they want to order for say, if i was the user i would want to order or receive more info on

    Litter

    Treats

    The Third Box would be filled out when i select Litter and hit the left arror button and then i could use the arrors to move down and select the left arror to select Treats in the third box.

    Does this help

    What is an pre-filled arrays and how are they used?, i'm learning on my own and need all the help i can get. I make up dum ideas like assignments for my self and try to do them and wont let them go till i learn it.. This on has lasted for over a week now.?
    Copy linkTweet thisAlerts:
    @oleragFeb 15.2004 — Here's some sample code to give you an idea...
    [code=php]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Content-Script-Type" content="text/javascript">
    <title>Selection List Sample</title>
    <script type="text/javascript">
    <!--
    var products = new Array("b|Seed","b|Swing","b|Mirror","b|Cage",
    "c|Litter","c|Catnip","c|Toy","c|Scratchpad",
    "d|Bone","d|Bed","d|Bowl","d|Brush",
    "f|Aquarium","f|Filter","f|Plants","f|Thermometer");

    function getProducts(obj) {
    var val = obj.options[obj.selectedIndex].value;

    if (val.length > 0) {
    var temp = new Array();
    var count = 0;
    for (var i=0; i<products.length; i++) {
    if (val == products[i].substring(0,1)) {
    temp[count] = products[i].substring(2,products[i].length);
    count++;
    }
    }
    temp.sort();

    var prodObj = document.forms[0].productList;
    prodObj.length = 0;
    for (var i=0; i<temp.length; i++) {
    prodObj.options[i] = new Option(temp[i],temp[i]);
    }
    }
    }

    function showProducts(obj) {
    var str="";
    for (var i=0; i<obj.length; i++) {
    if (obj.options[i].selected) {
    str += obj.options[i].value + "n";
    }
    }
    if (str.length>0)
    alert("Selected Products:n" + str);
    else
    alert("No products selected.");
    }
    -->
    </script>
    <div style="text-align: center;">
    <strong>Selection List Sample</strong>
    </div>

    <body onLoad="getProducts(document.forms[0].animalList)">
    <form action="#">
    <p>
    <select name="animalList" size="1" onChange="getProducts(this)">
    <option value="b">Bird</option>
    <option value="c">Cat</option>
    <option value="d" selected>Dog</option>
    <option value="f">Fish</option>
    </select>

    <select name="productList" size="4" multiple>
    <option value=""></option>
    </select>
    </p>

    <p style="text-align: center;">
    <input type="button" name="btn1" value="Execute" onClick="showProducts(document.forms[0].productList)" />
    </p>
    </form>
    </body>
    [/code]
    Copy linkTweet thisAlerts:
    @RedheadauthorFeb 15.2004 — Ok, that's great i can work with that and keep trying, but how would you sort through and array and have the top selection in the list it automaticed selected?
    Copy linkTweet thisAlerts:
    @oleragFeb 16.2004 — The array ("temp") is already sorted for you, via the

    temp.sort() function.

    To select an option, the syntax is...

    document.forms[0].selectListObj.options[i].selected. So, to,

    lets say, select the first option in the "products" list in the

    sample code (once all options are created from the "for"

    loop) issue...

    [code=php]
    prodObj.options[0].selected;
    [/code]
    Copy linkTweet thisAlerts:
    @RedheadauthorFeb 16.2004 — Ok Not sure i understand,,

    Let me try and clear this up if that's ok..

    I have the list box to the left with all the animals, Beside the the List i have images of arrors one arrow going up the other going down,

    How can i use those im ages to go throught the list
    [code=php]<img src="images/arrowUp.jpg" onClick=temp.sort()[/code]
    Copy linkTweet thisAlerts:
    @oleragFeb 16.2004 — 
  • 1. The sole purpose of the "global" array, in the sample code

    previously provided, is simply used to store all possible

    "products", regardless of the animal selected. Once an

    animal selection is made, a "temp" array is populated with

    values from the global array that only pertain to that

    animal. It is the values in this "temp" array that will

    populate the "product" list, after it is sorted.


  • 2. Selecting one or more options, in my opinion, should be

    done without any frills. If you use images to move thru

    selections, you still haven't selected anything so you'd need

    another object for that. And now, if you entertain other

    selection lists, won't you need at least three more images

    for that listing (along with the support code, requirements

    collection, and, possibly, user help info to explain the

    nuiances of the "strange way" to additionally make

    selections).
    • Copy linkTweet thisAlerts:
    @RedheadauthorFeb 16.2004 — Ok i'm getting it know

    what if i was to create a list just normal

    And had an image of an arror and wanted to use the arror to go up and down of the list
    [code=php]
    <select name="animalList" size="9">
    <option selected>Bird</option>
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
    </select>
    [/code]

    and beside that i have

    [code=php]
    <img src="images/up.jpg"><img src="images/down.jpg">
    [/code]

    How would i be able to use the images to go up and down, selecting each one at a time with the arrors
    Copy linkTweet thisAlerts:
    @oleragFeb 16.2004 — I guess your hung-up on using arrow images to do something

    that is inherint with a <select>. Well, first, you'll still need

    at least one other image to de-select options previously

    selected. Anyway, for a "multiple" listing you could do the

    following...

  • 1. For each <select> you'll need a global variable storing the

    current position of the array, initialized (probably) at 0.

  • 2. Each time an image is clicked (via on "onClick" event for

    each image), that particular option for the corresponding

    <select> can be selected (if it wasn't already).

  • 3. The global is then incremeted/decremented, depending

    on the image that was pressed.


    • And to repeat, you'll need at least one other object to permit

    the user to de-select a previously selected option, so this is

    more code.
    Copy linkTweet thisAlerts:
    @RedheadauthorFeb 16.2004 — Ok I'm not sure i'm understanding

    So i'll have to come up with

    [code=php]
    function fillList1(form)

    var animalsbox = getAnimalsNum("animalList",form);

    if (form.elements[animalsbox].selectedIndex == 0)
    {
    ClearOptions(form.elements[animalsbox]);
    }
    else
    {
    This is where i'm not sure
    [/code]

    ? Yep i do get hung up on things sorry, i made this up in my head one day and i can not let it go, i'm not even sleeping at night cuz of this
    Copy linkTweet thisAlerts:
    @oleragFeb 17.2004 — Here my advice...

  • 1. Forget about those images for option selection.

  • 2. Get some wine (preferably, Rapidan Vineyards dry).

  • 3. Put on a Sarah MacLaughlin tape.

  • 4. Drink the entire bottle.


    • You be asleep before the bottle is empty or the CD if finished.
    Copy linkTweet thisAlerts:
    @RedheadauthorFeb 17.2004 — Thats some good advice ?

    I think i'll do that!
    Copy linkTweet thisAlerts:
    @RedheadauthorFeb 18.2004 — Hi Again

    Well just thought i would ask you something else and give you an up date..

    I was able to get a script that will go up and down a select list using arrows..

    I'm running into another problem tho.. I was given anther script by an old friend. and i need to get my script added into his..

    The problem is that his select names for each list have . in them and keep messing up my script..

    Can somehelp me debug his script so i can get mine working with his. If I posed all the code?
    Copy linkTweet thisAlerts:
    @oleragFeb 18.2004 — Yep - gotta have the code first.
    Copy linkTweet thisAlerts:
    @RedheadauthorFeb 18.2004 — Here is the script that allows the user to use the arrows to move up and down the list.

    [code=php]
    <SCRIPT LANGUAGE="JavaScript">

    function moveSelection(direction) {

    var n = parseInt(document.animals.list1.selectedIndex);

    if ( direction == "up" )
    {
    var y = n - 1;
    }
    else if ( direction == "down" )
    {
    var y = n + 1;
    }
    else {
    alert("Incorrect parameters supplied to function.");
    }

    document.animals.list1.options[n].selected = false;
    document.animals.list1.options[y].selected = true;

    }
    </script>

    <body>
    <form name="animals" method="post" action="">
    <select name="list1" size="9">
    <option selected>Cat</option>
    <option>Dog</option>
    <option>Bird</option>
    <option>Fish</option>
    </select>
    <img src="images/up.jpg" width="50" height="50" onClick="javascript:moveSelection('up');" alt="UP">
    <img src="images/down.jpg" width="50" height="50" onClick="javascript:moveSelection('down');" alt="DOWN">
    </form>
    [/code]

    I have attached the main file called test.htm that's the file that was given to me with someone else code. I want to get this scirpt working with the one given to me..

    [upl-file uuid=73c6d968-0de1-4656-9b30-cc89437ac8af size=2kB]testhtmlfile.zip[/upl-file]
    Copy linkTweet thisAlerts:
    @oleragFeb 18.2004 — 
  • 1. The code you displayed in your last thread had some

    mistakes so here's some corrections.
    [code=php]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Content-Script-Type" content="text/javascript">
    <title>RedHead Sample</title>
    <script type="text/javascript">
    <!--
    function moveSelection(direction) {
    var n = parseInt(document.animals.list1.selectedIndex);
    var y = -1;
    if (direction == "up" && n > 0) {
    y = n - 1;
    }
    else {
    if (direction == "down" && n < document.animals.list1.length-1) {
    y = n + 1;
    }
    }

    if (y >= 0) {
    document.animals.list1.options[y].selected = true;
    }
    }

    // -->
    </script>

    <div style="text-align: center;">
    <strong>RedHead Sample</strong>
    </div>

    <p style="text-align: center;">
    <form name="animals" method="post" action="#">
    <select name="list1" size="5">
    <option selected>Cat</option>
    <option>Dog</option>
    <option>Bird</option>
    <option>Fish</option>
    </select>
    <img src="images/up.jpg" width="50" height="50" alt="UP" onClick="moveSelection('up');">
    <img src="images/down.jpg" width="50" height="50" alt="DOWN" onClick="moveSelection('down');">
    </form>
    </p>
    [/code]
    2.The attached "zip" file only contained a single html file

    that is (know other way to say it) just a mess. I really

    believe it'd be easier to begin by..

    a) Using the script I previously provided to initialize your

    first two selections and you can incorporate the change(s)

    above if you really must use images to move between your

    options. This is OK for "single-selection" objects but, again,

    this is going to cause problems for you on your "multiple"

    selection lists.

    b) Anyway, once done you can continue to add your other

    objects for that third selection list.

    I strongly recommend that you do not move on to the next

    phase of your development until you totally work the

    kinks out of what your currently working on.
    • Copy linkTweet thisAlerts:
    @RedheadauthorFeb 18.2004 — Wow Thanks So Much!!

    Can I ask for more Help ? or would that just be pushing it LOL
    Copy linkTweet thisAlerts:
    @oleragFeb 18.2004 — No problem - just can't guarantee you'll like the answers.
    Copy linkTweet thisAlerts:
    @RedheadauthorFeb 18.2004 — Here is the script
    [code=php]
    <script type="text/javascript">

    <!--

    var products = new Array("b|Seed","b|Swing","b|Mirror","b|Cage",
    "c|Litter","c|Catnip","c|Toy","c|Scratchpad",
    "d|Bone","d|Bed","d|Bowl","d|Brush",
    "f|Aquarium","f|Filter","f|Plants","f|Thermometer");
    function moveSelection(direction) {
    var n = parseInt(document.test.choices.selectedIndex);
    var y = -1;
    if (direction == "up" && n > 0) {
    y = n - 1;
    }
    else {
    if (direction == "down" && n < document.test.choices.length-1) {
    y = n + 1;
    }
    }

    if (y >= 0) {
    document.test.choices.options[y].selected = true;
    }
    }

    function getProducts(obj) {
    var val = obj.options[obj.selectedIndex].value;

    if (val.length > 0) {
    var temp = new Array();
    var count = 0;
    for (var i=0; i<products.length; i++) {
    if (val == products[i].substring(0,1)) {
    temp[count] = products[i].substring(2,products[i].length);
    count++;
    }
    }
    temp.sort();

    var prodObj = document.forms[0].productList;
    prodObj.length = 0;
    for (var i=0; i<temp.length; i++) {
    prodObj.options[i] = new Option(temp[i],temp[i]);
    }
    }
    }

    -->
    </script>
    [/code]

    Here is the html code:
    [code=php]
    <body onLoad="getProducts(document.forms[0].choices)">
    <form name="test" action="#">
    <p>&nbsp; </p>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td colspan="2"> <select name="choices" size="9" onChange="getProducts(this)">
    <option value="b">Bird</option>
    <option value="c">Cat</option>
    <option value="d" selected>Dog</option>
    <option value="f">Fish</option>
    </select></td>
    <td width="88%">&nbsp;</td>
    <td width="88%"><select name="productList" size="9" multiple>
    <option value=""></option>
    </select></td>
    <td width="88%">&nbsp;</td>
    </tr>
    <tr>
    <td width="6%"><img src="images/up.jpg" width="50" height="50" onClick="javascript:moveSelection('up');" alt="UP"></td>
    <td width="6%"><img src="images/down.jpg" width="50" height="50" onClick="javascript:moveSelection('down');" alt="DOWN"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </form>
    </body>
    [/code]

    I just want to be able to use the arrows and still make change to the second list box as it would if you used the mouse
    Copy linkTweet thisAlerts:
    @oleragFeb 18.2004 — Try this for starters. Notice that the table formatting is gone.

    Your next thing to do is to put some "style" into the page.

    No <table> tags for this, OK - just "style" commands. And

    no more JS or adding additional objects until you get the

    look-n-feel you want.

    So keep it simple and only add style for the two selection

    lists/images and ensure the html passes the [URL=http://validator.w3.org]validator[/URL].

    [code=php]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Content-Script-Type" content="text/javascript">
    <title>RedHead Sample</title>
    <script type="text/javascript">
    <!--
    var products = new Array("b|Seed","b|Swing","b|Mirror","b|Cage",
    "c|Litter","c|Catnip","c|Toy","c|Scratchpad",
    "d|Bone","d|Bed","d|Bowl","d|Brush",
    "f|Aquarium","f|Filter","f|Plants","f|Thermometer");

    function pickAnimal(dir) {
    var obj = document.forms[0].animals;
    var n = obj.selectedIndex;
    var y = -1;

    if (dir == "-" && n > 0) {
    y = n - 1;
    }
    else {
    if (dir == "+" && n < obj.length-1) {
    y = n + 1;
    }
    }

    if (y >= 0) {
    obj.options[y].selected = true;
    getProducts(obj);
    }
    }

    function getProducts(obj) {
    var val = obj.options[obj.selectedIndex].value;

    if (val.length > 0) {
    var temp = new Array();
    var count = 0;
    for (var i=0; i<products.length; i++) {
    if (val == products[i].substring(0,1)) {
    temp[count] = products[i].substring(2,products[i].length);
    count++;
    }
    }
    temp.sort();

    var prodObj = document.forms[0].products;
    prodObj.length = 0;
    for (var i=0; i<temp.length; i++) {
    prodObj.options[i] = new Option(temp[i],temp[i]);
    }
    }
    }
    // -->
    </script>

    <body onLoad="getProducts(document.forms[0].animals)">
    <p>
    <form action="#">
    <select name="animals" size="9" onChange="getProducts(this)">
    <option value="b">Bird</option>
    <option value="c">Cat</option>
    <option value="d" selected>Dog</option>
    <option value="f">Fish</option>
    </select>

    <select name="products" size="9" multiple>
    <option value=""></option>
    </select>
    </form>
    </p>

    <p>
    <img src="images/up.jpg" width="50" height="50" alt="Up" onClick="pickAnimal('-')">&nbsp;&nbsp;
    <img src="images/down.jpg" width="50" height="50" alt="Down" onClick="pickAnimal('+')">
    </p>

    <p>
    <a href="http://validator.w3.org" target="_blank">
    <img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88">
    </a>
    </p>
    </body>
    [/code]
    ×

    Success!

    Help @Redhead spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.19,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...