2 List menus

[roders22]

Hi all, i have a drop menu on my form, i wanted to know if there's anyway when you select an option in that menu it loads in another drop menu all the item concerning it, for e.g. Mobile website you have a list of all the type of phones for example in a drop down menu e.g. Nokia, Motorola etc... if you select Nokia. You have another drop down menu where you will get all the model number like 6610, 3310 etc...
Does any1 know how to do it?

[Magnotta]

go to www.alistaparts.com and browse around. I know I've seen something rather similar. Check in the CSS or HTML section, and look for something about a Mac style menu and that's will be what I mean.

[baz-x]

Other topic in PHP Programming was similar to this one so I deleted the other one.
If you are familiar with JavaScript I'll give you a script I found on a site:

Code: Select all

<form name="phones" method="post">
Choose your Mobile Phone:
<script type="text/javascript">
<!--

// How to:

// * Template for options (hidden values)
// <input type="hidden" name="{PRODUCER_VALUE}{NUMBER}" value="{MOBILE_PHONE_ID}" />
// <input type="hidden" name="{PRODUCER_PREFIX}{PRODUCER_VALUE}{NUMBER}" value="{INTERNAL_ID_FOR_SCRIPT}" />

// In this case PRODUCER_VALUE is a value between pr1 and pr5
// The NUMBER should be increasing so script won't get confused and in this case is for pr1 (Nokia) between 0 and 3
// The MOBILE_PHONE_ID is then the id for your mobile (like Nokia 3310 or something like that)
// The PRODUCER_PREFIX is the prefix used for PRODUCER_VALUE and the chars before the first letter; in this case 'pr'

function do_add(a)
{
    new_entry = new Option("Choose Model","");
    document.phones.model.options[document.phones.model.length] = new_entry;

    var x = 0;
    var l = 0;

    while ( typeof eval("document.phones."+a+x) == "object" )
    {
        new_entry = new Option(eval("document.phones."+a+x+".value"), eval("document.phones.pr"+a+x+".value"));
        document.phones.model.options[document.phones.model.length] = new_entry;
        x++;
    }
}

function do_empty()
{
    while ( document.phones.model.length > 0 )
    {
        document.phones.model.options[document.phones.model.length-1] = null;
    }
}

//-->
</script>

<!-- Nokia Mobile Phones -->
<input type="hidden" name="pr10" value="3210" />
<input type="hidden" name="prpr10" value="id3210" />
<input type="hidden" name="pr11" value="3310" />
<input type="hidden" name="prpr11" value="id3310" />
<input type="hidden" name="pr12" value="6510" />
<input type="hidden" name="prpr12" value="id6510" />
<input type="hidden" name="pr13" value="6320" />
<input type="hidden" name="prpr13" value="id6320" />
<!-- Samsung Mobile Phones -->
<input type="hidden" name="pr20" value="SGH E-310" />
<input type="hidden" name="prpr20" value="id310" />
<input type="hidden" name="pr21" value="SGH E-720" />
<input type="hidden" name="prpr21" value="id720" />
<!-- Continue with other Mobile Phones -->

<select name="producer" onchange="do_empty(), do_add(this.value);">
<option>Choose Producer</option>
<option value="pr1">Nokia</option>
<option value="pr2">Samsung</option>
<option value="pr3">Siemens</option>
<option value="pr4">Motorola</option>
<option value="pr5">Sony Ericsson</option>
<!-- Continue with more producers -->
</select>

<select name="model">
<option>Choose Model</option>
</select>

<input type="submit" value="OK" />
</form>

I have modified the script to your needs of course you have finally adapt to your site.
If you have a problems send me complete list of phones and producers and I'll finish this script.

[roders22]

Sorry it doesn't seem to work. When i select Nokia it doesn't give me the list of models? It stays on choose option.

[roders22]

It works but how to link it together? For example you've done only for samsung and nokia if i want to add for siemens what do i do?

[baz-x]

I have added a little How To in the script, please read it. Rest should be more or less logical if you compare the hidden fields for Nokia or Samsung.

[roders22]

Yeah sorry i was just getting confused with all dat. Now all i need is a list of phones. Any idea where to get it ?

[roders22]

Ok i have 1 more problem with dis code now. You can list 1 - 10 i mean for e.g. <input type="hidden" name="pr10" ....>
so the input name will go up to pr19. What do i do when i reach pr19?

[baz-x]

Ow, yes. Correct. Try it this way: pr100; pr101; pr109; ... ; pr119; pr120; and so on ...