Form with 4 pull downs, each pulldown giving the next one a preselected result

SmileyWar · August 18, 2011

Hello guys, i have tried to do a search here on my topic but i`m having issues with what the function is called so i dont know what i`m required to look for.

What i`m trying to do is that the first pull down gives you a pre selection of the second pull down so that not everything is available.

for example

dropdown1: 175

will result in dropdown2: 65,75,85

and so on.

If somebody could push me in the right direction, many thanks

<style type="text/css">
#chain-selector-container {
width: 75%;
    margin: auto;
padding-top:40px;
}

#chain-selector-form {
background: #f1e767; /* Old browsers */
background: -moz-linear-gradient(top, #f1e767 0%, #feb645 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1e767), color-stop(100%,#feb645)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f1e767 0%,#feb645 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f1e767 0%,#feb645 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f1e767 0%,#feb645 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f1e767 0%,#feb645 100%); /* W3C */
padding:15px;
-moz-border-radius: 5px;
border-radius: 5px;
border:solid 1px #000000;
-moz-box-shadow: 0px 0px 3px #000;
-webkit-box-shadow: 0px 0px 3px #000;
box-shadow: 0px 0px 3px #000;
}	

#option {
border: 1px solid #FFFFFF;
background-color:#d9e5ef;
-moz-border-radius:3px 3px 3px 3px;
-webkit-border-radius:3px 3px 3px 3px;
border-radius:3px 3px 3px 3px;
}

#submit {
margin-bottom:5px;
border: 1px solid #FFFFFF;
background-color:#d9e5ef;
-moz-border-radius:3px 3px 3px 3px;
-webkit-border-radius:3px 3px 3px 3px;
border-radius:3px 3px 3px 3px;
}

#submit:hover {
border: 1px solid #000000;
-moz-border-radius:3px 3px 3px 3px;
-webkit-border-radius:3px 3px 3px 3px;
border-radius:3px 3px 3px 3px;
}
</style>

<div id="chain-selector-container">
<div id="chain-selector-form" align="center">
<h2>Enter your tyre size below to find prices & sizes</h2>
<form name="myform" action="process_action1.php" method="POST">
<select name="width" id="option">
<option SELECTED value="">Tyre Width</option>
<option value="6.5">6.5</option>
<option value="7">7</option>
<option value="7.5">7.5</option>
<option value="10">10</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="33">33</option>
<option value="125">125</option>
<option value="135">135</option>
<option value="145">145</option>
<option value="155">155</option>
<option value="165">165</option>
<option value="175">175</option>
<option value="185">185</option>
<option value="195">195</option>
<option value="205">205</option>
<option value="215">215</option>
<option value="225">225</option>
<option value="235">235</option>
<option value="245">245</option>
<option value="255">255</option>
<option value="265">265</option>
<option value="275">275</option>
<option value="285">285</option>
<option value="295">295</option>
<option value="305">305</option>
<option value="315">315</option>
<option value="325">325</option>
<option value="335">335</option>
<option value="345">345</option>
<option value="355">355</option>
</select>
<select name="profile" id="option">
<option SELECTED value="">Tyre Profile</option>
<option value="n_a">none</option>
<option value="9.5">9.5</option>
<option value="10.5">10.5</option>
<option value="11.5">11.5</option>
<option value="12.5">12.5</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
<option value="60">60</option>
<option value="65">65</option>
<option value="70">70</option>
<option value="75">75</option>
<option value="80">80</option>
<option value="85">85</option>
</select>
<select name="rim" id="option">
<option SELECTED value="">Rim Size</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="390">390</option>
<option value="415">415</option>
</select>
<select name="vehicle_type" id="option">
<option SELECTED value="">Vehicle Type</option>
<option value="car">Car</option>
<option value="suv">SUV</option>
<option value="caravan">Caravan</option>
<option value="twin_wheel_caravan">Twin Wheel Caravan</option>
<option value="van">Van</option>
<option value="twin_wheel_van">Twin Wheel Van</option>
<option value="commercial_vehicle">Commercial Vehicle</option>

</select>
<input type="submit" id="submit" />
</form>
</div>
</div>

voip03 · August 18, 2011

Can you use jQuery>

http://css-tricks.com/2282-simple-jquery-dropdowns/

http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/

SmileyWar · August 18, 2011

Hello voip03

With your response i found a little example what i was sort of looking for.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-language" content="en">
    <title>Dynamic select elements</title>

    <style type="text/css">
        html, body, form {
            padding: 0px;
            margin: 0px;
        }
        body {
            margin: 1em;
            font-family: Verdana, Arial, Helvetica, sans-serif;
        }
    </style>

    <script type="text/javascript">
    <!--

        function loadSelectElement(selObjId, options) {
            var selObj = document.getElementById(selObjId);

            // clear the target select element apart from the "select your..." option
            selObj.options.length = 1;

            // copy options from array of [value, pair] arrays to select box
            // IE doesn't work if you use the DOM-standard method, however...
            if (typeof(window.clientInformation) != 'undefined') {
                // IE doesn't take the second "before" parameter...
                for (var loop=0; loop<options.length; loop++) selObj.add(new Option(options[loop][1], options[loop][0]));
            } else {
                for (var loop=0; loop<options.length; loop++) selObj.add(new Option(options[loop][1], options[loop][0]), null);
            }
        }

        function madeSelection(selObj) {
            var selectedValue = selObj.options[selObj.selectedIndex].value;
            var selectedText = selObj.options[selObj.selectedIndex].text;
            if (selectedValue == '--') return;

            if (selObj.name == 'select01') {
                document.getElementById('select02Container').style.display = 'block';
                document.getElementById('select02').options[0].text = 'Select the breed of your ' + selectedText.toLowerCase();

                switch(selectedValue) {
                    case 'type_cat':
                        loadSelectElement('select02', [
                            ['breed_persian', 'Persian'],
                            ['breed_tabby', 'Tabby'],
                            ['breed_siamese', 'Siamese']
                        ]);
                        return;

                    case 'type_dog':
                        loadSelectElement('select02', [
                            ['breed_alsatian', 'Alsatian'],
                            ['breed_springer_spaniel', 'Springer Spaniel'],
                            ['breed_king_charles_spaniel', 'King Charles Spaniel'],
                            ['breed_chihuahua', 'Chihuahua'],
                            ['breed_shih_tzu', 'Shih Tzu']
                        ]);
                        return;

                    case 'type_bird':
                        loadSelectElement('select02', [
                            ['breed_parrot', 'Parrot'],
                            ['breed_cock', 'Cock']
                        ]);
                        return;

                    case 'type_fish':
                        loadSelectElement('select02', [
                            ['breed_goldfish', 'Goldfish']
                        ]);
                        return;
                }
            } // select01

            if (selObj.name == 'select02') {
                document.getElementById('select03Container').style.display = 'block';
                document.getElementById('select03').options[0].text = 'Select the colour of your ' + selectedText;

                switch(selectedValue) {
                    case 'breed_persian':
                    case 'breed_siamese':
                        loadSelectElement('select03', [
                            ['colour_white', 'White'],
                            ['colour_grey', 'Grey'],
                            ['colour_blue', 'Blue']
                        ]);
                        return;

                    case 'breed_tabby':
                        loadSelectElement('select03', [
                            ['colour_tabby', 'Tabby']
                        ]);
                        return;

                    case 'breed_alsatian':
                    case 'breed_springer_spaniel':
                    case 'breed_king_charles_spaniel':
                    case 'breed_chihuahua':
                    case 'breed_shih_tzu':
                        loadSelectElement('select03', [
                            ['colour_brown', 'Brown'],
                            ['colour_white', 'White'],
                            ['colour_golden', 'Golden']
                        ]);
                        return;


                    case 'breed_parrot':
                        loadSelectElement('select03', [
                            ['colour_white', 'White'],
                            ['colour_yellow', 'Yellow'],
                            ['colour_red_yellow', 'Red & Yellow']
                        ]);
                        return;

                    case 'breed_cock':
                        loadSelectElement('select03', [
                            ['colour_white', 'White'],
                            ['colour_brown', 'Brown']
                        ]);
                        return;

                    case 'breed_goldfish':
                        loadSelectElement('select03', [
                            ['colour_orange', 'Orange']
                        ]);
                        return;

                }
            } // select02
        }

    //-->
    </script>
</head>

<body>
    <form name="myForm">
        <select name="select01" id="select01" onchange="madeSelection(this);">
            <option value="--">Select your pet type</option>
            <option value="type_cat">Cat</option>
            <option value="type_dog">Dog</option>
            <option value="type_bird">Bird</option>
            <option value="type_fish">Fish</option>
        </select>

        <div id="select02Container" style="margin-top:1em; display:none;">
            <select name="select02" id="select02" onchange="madeSelection(this);">
                <option value="--">Select your pet breed</option>
            </select>
        </div>

        <div id="select03Container" style="margin-top:1em; display:none;">
            <select name="select03" id="select03" onchange="madeSelection(this);">
                <option value="--">Select your pet colour</option>
            </select>
        </div>
    </form>
</body>
</html>

voip03 · August 18, 2011

happy to help you and please make it solved

SmileyWar · August 18, 2011

Thank you very much.

antonyfal · August 18, 2011

Hey i see you got an answer!

here is something i did when i had the same issue as you, although tis code is long, its easier to edit then the example you had:

// copy the code as is, save to an html page open with browser and test-- you can change the variable as you wish..

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><!--

function changeSizes(which) {

for (var i = 0; i<document.clothes.elements.length; i++) {

if ((document.clothes.elements.type == 'select-one')) {

document.clothes.elements.selectedIndex = which;

}

// -->

</script>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><!--

function changeShoes(which) {

for (var i = 0; i<document.shoes.elements.length; i++) {

if ((document.shoes.elements.type == 'select-one')) {

document.shoes.elements.selectedIndex = which;

}

// -->

</script>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

function inCm(form) { ht=form.ht.value; if((ht==null)||(ht=="")||(isNaN(ht))){ form.answer.value="?"; form.show.value="?"; alert('Please enter a length with numbers only. Use a period for decimal place.'); form.ht.focus(); form.ht.select(); return false; } if (form.choice[0].checked){ var answer= ht * 0.3937008; var round=Math.round(10*answer)/10; var text1=" cm = "; var text2=" in"; var text3=" centimeters multiplied by 0.3937008 = "; var text4=" inches."; form.answer.value=ht + text1 + round + text2; form.show.value= ht+ text3 + round + text4; } if (form.choice[1].checked){ var answer=ht * 2.54; var round=Math.round(10*answer)/10; text1=" in = "; text2=" cm"; text3=" inches multiplied by 2.54 = "; text4=" centimeters."; form.answer.value=ht + text1 + round + text2; form.show.value= ht + text3 + round + text4;

}

function lbsKg(form) {wt=form.wt.value;if((wt==null)||(wt=="")||(isNaN(wt))){form.answer.value="?";form.show.value="?";alert('Please enter a weight with numbers only. Use a period for decimal place.');form.wt.focus();form.wt.select();return false;}if (form.choice[0].checked){var answer= wt / 2.2;var round=Math.round(10*answer)/10;var text1=" lbs = ";var text2=" kg";var text3=" pounds divided by 2.2 = ";var text4=" kilograms.";form.answer.value=wt + text1 + round + text2;form.show.value= wt+ text3 + round + text4;}if (form.choice[1].checked){var answer=wt * 2.2;var round=Math.round(10*answer)/10;text1=" kg = ";text2=" lbs";text3=" kilograms multiplied by 2.2 = ";text4=" pounds.";form.answer.value=wt + text1 + round + text2;form.show.value= wt + text3 + round + text4;

}

</script>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

function forward() {

with (document.convertcmtoft) {

unit1.value = unit1.value.toString().replace(/[^\d\.eE-]/g,'');

if (unit1.value*0.0328083989501 != 0)

unit2.value = unit1.value*0.0328083989501;

}

function backward() {

with (document.convertcmtoft) {

unit2.value = unit2.value.toString().replace(/[^\d\.eE-]/g,'');

if (unit2.value/0.0328083989501 != 0)

unit1.value = unit2.value/0.0328083989501;

}

</script>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

function changeBra(which) {

for (var i = 0; i<document.bra.elements.length; i++) {

if ((document.bra.elements.type == 'select-one')) {

document.bra.elements.selectedIndex = which;

}

</script>

<div style="background-color:#444444">

<center>

<table>

<tr>

<td><br></td>

</tr>

</table>

<form name="htForm">

<table cellspacing="0" cellpadding="0" border="1" bordercolordark="#ff0000" bgcolor="#FFD500">

<tbody>

<tr>

<td><font color="#000000;">Convert cm to inches or inches to cm:</td>

</tr><tr>

<td>

<table cellspacing="0" cellpadding="2" border="0">

<tbody><tr><td><b>enter length</b></td><td>

<input type="text" size="5" name="ht">

</td><td><b>convert to inches</b></td><td>

<input type="radio" name="choice" checked="" value="0">

</td><td><b>or cm</b></td><td>

<input type="radio" name="choice" value="1">

</td><td><b>result</b></td><td><input value="click for answer" style="background-color: rgb(192, 192, 192);" size="15" name="answer">

</td><td align="middle" colspan="2"><input type="button" ;="" value="convert" onclick="inCm(this.form)">

</td></tr>

</tbody></table></td>

</form>

<table>

<tr>

<td><br></td>

</tr>

</table>

<form name="convertcmtoft">

<table cellspacing="0" cellpadding="0" border="1" bordercolordark="#ff0000" bgcolor="#FFD500">

<tbody>

<tr>

<td><font color="#000000;">Convert cm to feet and inches or feet inches to cm:</td>

</tr><tr>

<td>

<table cellspacing="0" cellpadding="2" border="0">

<tbody><tr><td><b>enter cm</b>

</td><td><b><input type=text name="unit1" size=15 maxlength=100

onBlur="forward()" value="">

</td><td><b>or feet/inch</b>

</td><td><input type=text name="unit2" size=22 maxlength=100

onBlur="backward()" value="">

</td><td><big><strong>then click</strong></big></td><td>

<input type=button value="Convert!"

onClick="forward()"></strong></big>

</td></tr>

</tbody></table></td>

</form>

<table>

<tr>

<td><br></td>

</tr>

</table>

<form name="wtForm">

<table cellspacing="0" cellpadding="0" border="1" bordercolordark="#ff0000" bgcolor="#79FF00">

<tbody>

<tr>

<td><font color="#000000;">Convert kgs to lbs or lbs to kgs:</td>

</tr><tr>

<td>

<table cellspacing="0" cellpadding="2" border="0">

<tbody><tr><td><b>enter weight</b></td><td>

<input type="text" size="5" name="wt">

</td><td><b>convert to kgs</b></td><td>

<input type="radio" name="choice" checked="" value="0">

</td><td><b>or lbs</b></td><td>

<input type="radio" name="choice" value="1">

</td><td><b>result</b></td><td><input value="click for answer" style="background-color: rgb(192, 192, 192);" size="17" name="answer">

</td><td align="middle" colspan="2"><input type="button" ;="" value="convert" onclick="lbsKg(this.form)">

</td></tr>

</tbody></table></td>

</form>

<table>

<tr>

<td><br></td>

</tr>

</table>

<form name="clothes">

<center><table cellspacing="0" cellpadding="3" border="1" bordercolordark="#ff0000" bgcolor="#ffff00">

<tbody>

<tr>

<td><font color="#000000;">Get the US dresssize:</td>

</tr><tr>

<td align="center"><font size="2">U.S.</font></td>

<td align="center"><font size="2">U.S. (named sizes)</font></td>

<td align="center"><font size="2">U.K.</font></td>

<td align="center"><font size="2">France</font></td>

<td align="center"><font size="2">Germany</font></td>

<td align="center"><font size="2">Italy</font></td>

<td align="center"><font size="2">Australia</font></td>

<td align="center"><font size="2">Japan</font></td>

</tr>

<tr>

<td align="center"><select onchange="changeSizes(this.selectedIndex);" size="1" name="USA">

<option>2</option>

<option>4</option>

<option>6</option>

<option>8</option>

<option>10</option>

<option>12</option>

<option>14</option>

<option>16</option>

<option>18</option>

<option>20</option>

<option>22</option>

<option>24</option>

</select></td>

<td align="center"><select onchange="changeSizes(this.selectedIndex);" size="1" name="USA_Named">

<option>X-Small</option>

<option>X-Small/Small</option>

<option>Small</option>

<option>Medium</option>

<option>Large</option>

<option>Large/X-Large</option>

<option>X-Large/1X</option>

<option>1X/2X</option>

<option>2X</option>

<option>3X</option>

</select></td>

<td align="center"><select onchange="changeSizes(this.selectedIndex);" size="1" name="UK">

<option>4</option>

<option>6</option>

<option>8</option>

<option>10</option>

<option>12</option>

<option>14</option>

<option>16</option>

<option>18</option>

<option>20</option>

<option>22</option>

<option>24</option>

<option>26</option>

</select></td>

<td align="center"><select onchange="changeSizes(this.selectedIndex);" size="1" name="France">

<option>32</option>

<option>34</option>

<option>36</option>

<option>38</option>

<option>40</option>

<option>42</option>

<option>44</option>

<option>46</option>

<option>50</option>

<option>52</option>

<option>54</option>

<option>56</option>

</select></td>

<td align="center"><select onchange="changeSizes(this.selectedIndex);" size="1" name="Germany">

<option>30</option>

<option>32</option>

<option>34</option>

<option>36</option>

<option>38</option>

<option>40</option>

<option>42</option>

<option>44</option>

<option>46</option>

<option>48</option>

<option>50</option>

<option>52</option>

</select></td>

<td align="center"><select onchange="changeSizes(this.selectedIndex);" size="1" name="Italy">

<option>36</option>

<option>38</option>

<option>40</option>

<option>42</option>

<option>44</option>

<option>46</option>

<option>48</option>

<option>50</option>

<option>52</option>

<option>54</option>

<option>56</option>

<option>58</option>

</select></td>

<td align="center"><select onchange="changeSizes(this.selectedIndex);" size="1" name="Australia">

<option>6</option>

<option>8</option>

<option>10</option>

<option>12</option>

<option>14</option>

<option>16</option>

<option>18</option>

<option>20</option>

<option>22</option>

<option>24</option>

<option>26</option>

<option>28</option>

</select></td>

<td align="center"><select onchange="changeSizes(this.selectedIndex);" size="1" name="Japan">

<option>5</option>

<option>7</option>

<option>9</option>

<option>11</option>

<option>13</option>

<option>15</option>

<option>17</option>

<option>19</option>

<option>21</option>

<option>23</option>

<option>25</option>

<option>27</option>

</select></td>

</tr>

</tbody></table>

</center>

</form><br><form name="bra">

<table cellspacing="0" cellpadding="3" border="1" bordercolordark="#ff0000" bgcolor="#ffff00">

<tbody>

<tr>

<td><font color="#000000;">Get the US Brasize:</td>

</tr>

<tr>

<td align="center"><font size="2">U.S.</font></td>

<td align="center"><font size="2">U.K</font></td>

<td align="center"><font size="2">AUS/NZ</font></td>

<td align="center"><font size="2">EU/JAP</font></td>

<td align="center"><font size="2">Belg/Spain/France/Port</font></td>

<td align="center"><font size="2">Ital/Czeck</font></td>

</tr>

<tr>

<td align="center"><select onchange="changeBra(this.selectedIndex);" size="1" name="US">

<option >30AA</option>

<option >30A</option>

<option >30B</option>

<option >30C</option>

<option >30D</option>

<option >30DD</option>

<option >30DDD/E</option>

<option >30F</option>

<option >30G</option>

<option >30H</option>

<option >30I</option>

<option >32AA</option>

<option >32A</option>

<option >32B</option>

<option >32C</option>

<option >32D</option>

<option >32DD</option>

<option >32DDD/E</option>

<option >32F</option>

<option >32G</option>

<option >32H</option>

<option >32I</option>

<option >34AA</option>

<option >34A</option>

<option >34B</option>

<option >34C</option>

<option >34D</option>

<option >34DD</option>

<option >34DDD/E</option>

<option >34F</option>

<option >34G</option>

<option >34H</option>

<option >34I</option>

<option >36AA</option>

<option >36A</option>

<option >36B</option>

<option >36C</option>

<option >36D</option>

<option >36DD</option>

<option >36DDD/E</option>

<option >36F</option>

<option >36G</option>

<option >36H</option>

<option >36I</option>

<option >38AA</option>

<option >38A</option>

<option >38B</option>

<option >38C</option>

<option >38D</option>

<option >38DD</option>

<option >38DDD/E</option>

<option >38F</option>

<option >38G</option>

<option >38H</option>

<option >38I</option>

<option >40AA</option>

<option >40A</option>

<option >40B</option>

<option >40C</option>

<option >40D</option>

<option >40DD</option>

<option >40DDD/E</option>

<option >40F</option>

<option >40G</option>

<option >40H</option>

<option >40I</option>

<option >42AA</option>

<option >42A</option>

<option >42B</option>

<option >42C</option>

<option >42D</option>

<option >42DD</option>

<option >42DDD/E</option>

<option >42F</option>

<option >42G</option>

<option >42H</option>

<option >42I</option>

<option >44AA</option>

<option >44A</option>

<option >44B</option>

<option >44C</option>

<option >44D</option>

<option >44DD</option>

<option >44DDD/E</option>

<option >44F</option>

<option >44G</option>

<option >44H</option>

<option >44I</option>

</select></td>

<td align="center"><select onchange="changeBra(this.selectedIndex);" size="1" name="UK">

<option >30A</option>

<option >30B</option>

<option >30C</option>

<option >30D</option>

<option >30DD</option>

<option >30E</option>

<option >30F</option>

<option >30G</option>

<option >30H</option>

<option >30I</option>

<option >30J</option>

<option >32A</option>

<option >32B</option>

<option >32C</option>

<option >32D</option>

<option >32DD</option>

<option >32E</option>

<option >32F</option>

<option >32G</option>

<option >32H</option>

<option >32I</option>

<option >32J</option>

<option >34A</option>

<option >34B</option>

<option >34C</option>

<option >34D</option>

<option >34DD</option>

<option >34E</option>

<option >34F</option>

<option >34G</option>

<option >34H</option>

<option >34I</option>

<option >34J</option>

<option >36A</option>

<option >36B</option>

<option >36C</option>

<option >36D</option>

<option >36DD</option>

<option >36E</option>

<option >36F</option>

<option >36G</option>

<option >36H</option>

<option >36I</option>

<option >36J</option>

<option >38A</option>

<option >38B</option>

<option >38C</option>

<option >38D</option>

<option >38DD</option>

<option >38E</option>

<option >38F</option>

<option >38G</option>

<option >38H</option>

<option >38I</option>

<option >38J</option>

<option >40A</option>

<option >40B</option>

<option >40C</option>

<option >40D</option>

<option >40DD</option>

<option >40E</option>

<option >40F</option>

<option >40G</option>

<option >40H</option>

<option >40I</option>

<option >40J</option>

<option >42A</option>

<option >42B</option>

<option >42C</option>

<option >42D</option>

<option >42DD</option>

<option >42E</option>

<option >42F</option>

<option >42G</option>

<option >42H</option>

<option >42I</option>

<option >42J</option>

<option >44A</option>

<option >44B</option>

<option >44C</option>

<option >44D</option>

<option >44DD</option>

<option >44E</option>

<option >44F</option>

<option >44G</option>

<option >44H</option>

<option >44I</option>

<option >44J</option>

</select></td>

<td align="center"><select onchange="changeBra(this.selectedIndex);" size="1" name="NZ">

<option >8AA</option>

<option >8A</option>

<option >8B</option>

<option >8C</option>

<option >8D</option>

<option >8DD</option>

<option >8E</option>

<option >8F</option>

<option >8G</option>

<option >8H</option>

<option >8I</option>

<option >10AA</option>

<option >10A</option>

<option >10B</option>

<option >10C</option>

<option >10D</option>

<option >10DD</option>

<option >10E</option>

<option >10F</option>

<option >10G</option>

<option >10H</option>

<option >10I</option>

<option >12AA</option>

<option >12A</option>

<option >12B</option>

<option >12C</option>

<option >12D</option>

<option >12DD</option>

<option >12E</option>

<option >12F</option>

<option >12G</option>

<option >12H</option>

<option >12I</option>

<option >14AA</option>

<option >14A</option>

<option >14B</option>

<option >14C</option>

<option >14D</option>

<option >14DD</option>

<option >14E</option>

<option >14F</option>

<option >14G</option>

<option >14H</option>

<option >14I</option>

<option >16AA</option>

<option >16A</option>

<option >16B</option>

<option >16C</option>

<option >16D</option>

<option >16DD</option>

<option >16E</option>

<option >16F</option>

<option >16G</option>

<option >16H</option>

<option >16I</option>

<option >18AA</option>

<option >18A</option>

<option >18B</option>

<option >18C</option>

<option >18D</option>

<option >18DD</option>

<option >18E</option>

<option >18F</option>

<option >18G</option>

<option >18H</option>

<option >18I</option>

<option >20AA</option>

<option >20A</option>

<option >20B</option>

<option >20C</option>

<option >20D</option>

<option >20DD</option>

<option >20E</option>

<option >20F</option>

<option >20G</option>

<option >20H</option>

<option >20I</option>

<option >22AA</option>

<option >22A</option>

<option >22B</option>

<option >22C</option>

<option >22D</option>

<option >22DD</option>

<option >22E</option>

<option >22F</option>

<option >22G</option>

<option >22H</option>

<option >22I</option>

</select></td>

<td align="center"><select onchange="changeBra(this.selectedIndex);" size="1" name="EU">

<option >65A</option>

<option >65B</option>

<option >65C</option>

<option >65D</option>

<option >65E</option>

<option >65F</option>

<option >65G</option>

<option >65H</option>

<option >65I</option>

<option >65J</option>

<option >65K</option>

<option >70A</option>

<option >70B</option>

<option >70C</option>

<option >70D</option>

<option >70E</option>

<option >70F</option>

<option >70G</option>

<option >70H</option>

<option >70I</option>

<option >70J</option>

<option >70K</option>

<option >75A</option>

<option >75B</option>

<option >75C</option>

<option >75D</option>

<option >75E</option>

<option >75F</option>

<option >75G</option>

<option >75H</option>

<option >75I</option>

<option >75J</option>

<option >75K</option>

<option >80A</option>

<option >80B</option>

<option >80C</option>

<option >80D</option>

<option >80E</option>

<option >80F</option>

<option >80G</option>

<option >80H</option>

<option >80I</option>

<option >80J</option>

<option >80K</option>

<option >85A</option>

<option >85B</option>

<option >85C</option>

<option >85D</option>

<option >85E</option>

<option >85F</option>

<option >85G</option>

<option >85H</option>

<option >85I</option>

<option >85J</option>

<option >85K</option>

<option >90A</option>

<option >90B</option>

<option >90C</option>

<option >90D</option>

<option >90E</option>

<option >90F</option>

<option >90G</option>

<option >90H</option>

<option >90I</option>

<option >90J</option>

<option >90K</option>

<option >95A</option>

<option >95B</option>

<option >95C</option>

<option >95D</option>

<option >95E</option>

<option >95F</option>

<option >95G</option>

<option >95H</option>

<option >95I</option>

<option >95J</option>

<option >95K</option>

<option >100A</option>

<option >100B</option>

<option >100C</option>

<option >100D</option>

<option >100E</option>

<option >100F</option>

<option >100G</option>

<option >100H</option>

<option >100I</option>

<option >100J</option>

<option >100K</option>

</select></td>

<td align="center"><select onchange="changeBra(this.selectedIndex);" size="1" name="BEF">

<option >80A</option>

<option >80B</option>

<option >80C</option>

<option >80D</option>

<option >80E</option>

<option >80F</option>

<option >80G</option>

<option >80H</option>

<option >80I</option>

<option >80J</option>

<option >80K</option>

<option >85A</option>

<option >85B</option>

<option >85C</option>

<option >85D</option>

<option >85E</option>

<option >85F</option>

<option >85G</option>

<option >85H</option>

<option >85I</option>

<option >85J</option>

<option >85K</option>

<option >90A</option>

<option >90B</option>

<option >90C</option>

<option >90D</option>

<option >90E</option>

<option >90F</option>

<option >90G</option>

<option >90H</option>

<option >90I</option>

<option >90J</option>

<option >90K</option>

<option >95A</option>

<option >95B</option>

<option >95C</option>

<option >95D</option>

<option >95E</option>

<option >95F</option>

<option >95G</option>

<option >95H</option>

<option >95I</option>

<option >95J</option>

<option >95K</option>

<option >100A</option>

<option >100B</option>

<option >100C</option>

<option >100D</option>

<option >100E</option>

<option >100F</option>

<option >100G</option>

<option >100H</option>

<option >100I</option>

<option >100J</option>

<option >100K</option>

<option >105A</option>

<option >105B</option>

<option >105C</option>

<option >105D</option>

<option >105E</option>

<option >105F</option>

<option >105G</option>

<option >105H</option>

<option >105I</option>

<option >105J</option>

<option >105K</option>

<option >110A</option>

<option >110B</option>

<option >110C</option>

<option >110D</option>

<option >110E</option>

<option >110F</option>

<option >110G</option>

<option >110H</option>

<option >110I</option>

<option >110J</option>

<option >110K</option>

<option >115A</option>

<option >115B</option>

<option >115C</option>

<option >115D</option>

<option >115E</option>

<option >115F</option>

<option >115G</option>

<option >115H</option>

<option >115I</option>

<option >115J</option>

<option >115K</option>

</select></td>

<td align="center"><select onchange="changeBra(this.selectedIndex);" size="1" name="ICS">

<option >0A</option>

<option >0B</option>

<option >0C</option>

<option >0D</option>

<option >0E</option>

<option >0F</option>

<option >0G</option>

<option >0H</option>

<option >0I</option>

<option >0J</option>

<option >0K</option>

<option >1A</option>

<option >1B</option>

<option >1C</option>

<option >1D</option>

<option >1E</option>

<option >1F</option>

<option >1G</option>

<option >1H</option>

<option >1I</option>

<option >1J</option>

<option >1K</option>

<option >2A</option>

<option >2B</option>

<option >2C</option>

<option >2D</option>

<option >2E</option>

<option >2F</option>

<option >2G</option>

<option >2H</option>

<option >2I</option>

<option >2J</option>

<option >2K</option>

<option >3A</option>

<option >3B</option>

<option >3C</option>

<option >3D</option>

<option >3E</option>

<option >3F</option>

<option >3G</option>

<option >3H</option>

<option >3I</option>

<option >3J</option>

<option >3K</option>

<option >4A</option>

<option >4B</option>

<option >4C</option>

<option >4D</option>

<option >4E</option>

<option >4F</option>

<option >4G</option>

<option >4H</option>

<option >4I</option>

<option >4J</option>

<option >4K</option>

<option >5A</option>

<option >5B</option>

<option >5C</option>

<option >5D</option>

<option >5E</option>

<option >5F</option>

<option >5G</option>

<option >5H</option>

<option >5I</option>

<option >5J</option>

<option >5K</option>

<option >6A</option>

<option >6B</option>

<option >6C</option>

<option >6D</option>

<option >6E</option>

<option >6F</option>

<option >6G</option>

<option >6H</option>

<option >6I</option>

<option >6J</option>

<option >6K</option>

<option >7A</option>

<option >7B</option>

<option >7C</option>

<option >7D</option>

<option >7E</option>

<option >7F</option>

<option >7G</option>

<option >7H</option>

<option >7I</option>

<option >7J</option>

<option >7K</option>

</select></td>

</tr>

</tbody></table>

</form><br>

<form name="shoes">

<center><table cellspacing="0" cellpadding="3" border="1" bordercolordark="#ff0000" bgcolor="#ffff00">

<tbody>

<tr>

<td><font color="#000000;">Get the US Shoesize:</td>

</tr><tr>

<td align="center"><font size="2">U.S.<br>Canada</font></td>

<td align="center"><font size="2">Europe</font></td>

<td align="center"><font size="2">Mexico</font></td>

<td align="center"><font size="2">Japan</font></td>

<td align="center"><font size="2">U.K.</font></td>

<td align="center"><font size="2">Australia</font></td>

<td align="center"><font size="2">Korea</font></td>

<td align="center"><font size="2">inches</font></td>

<td align="center"><font size="2">centimeters<br>cm</font></td>

<td align="center"><font size="2">millimeters<br>mm</font></td>

</tr>

<tr>

<td align="center"><select onchange="changeShoes(this.selectedIndex);" size="1" name="US_Canada">

<option>5</option>

<option>5.5</option>

<option>6</option>

<option>6.5</option>

<option>7</option>

<option>7.5</option>

<option>8</option>

<option>8.5</option>

<option>9</option>

<option>9.5</option>

<option>10</option>

<option>10.5</option>

<option>12</option>

<option>13</option>

<option>14</option>

<option>15.5</option>

</select></td>

<td align="center"><select onchange="changeShoes(this.selectedIndex);" size="1" name="Europe">

<option>35</option>

<option>35.5</option>

<option>36</option>

<option>37</option>

<option>37.5</option>

<option>38</option>

<option>38.5</option>

<option>39</option>

<option>40</option>

<option>41</option>

<option>42</option>

<option>43</option>

<option>44</option>

<option>45</option>

<option>46.5</option>

<option>48.5</option>

</select></td>

<td align="center"><select onchange="changeShoes(this.selectedIndex);" size="1" name="Mexico">

<option>--</option>

<option>4.5</option>

<option>5</option>

<option>5.5</option>

<option>6</option>

<option>6.5</option>

<option>7</option>

<option>7.5</option>

<option>9</option>

<option>10</option>

<option>11</option>

<option>12.5</option>

</select></td>

<td align="center"><select onchange="changeShoes(this.selectedIndex);" size="1" name="Japan">

<option>21</option>

<option>21.5</option>

<option>22</option>

<option>22.5</option>

<option>23</option>

<option>23.5</option>

<option>24</option>

<option>24.5</option>

<option>25</option>

<option>25.5</option>

<option>26</option>

<option>27</option>

<option>28</option>

<option>29</option>

<option>30</option>

<option>31</option>

</select></td>

<td align="center"><select onchange="changeShoes(this.selectedIndex);" size="1" name="UK">

<option>2.5</option>

<option>3</option>

<option>3.5</option>

<option>4</option>

<option>4.5</option>

<option>5</option>

<option>5.5</option>

<option>6</option>

<option>6.5</option>

<option>7</option>

<option>7.5</option>

<option>8</option>

<option>9.5</option>

<option>10.5</option>

<option>11.5</option>

<option>13</option>

</select></td>

<td align="center"><select onchange="changeShoes(this.selectedIndex);" size="1" name="Australia">

<option>3.5</option>

<option>4</option>

<option>4.5</option>

<option>5</option>

<option>5.5</option>

<option>6</option>

<option>6.5</option>

<option>7</option>

<option>7.5</option>

<option>8</option>

<option>8.5</option>

<option>9</option>

<option>10.5</option>

<option>11.5</option>

<option>12.5</option>

<option>14</option>

</select></td>

<td align="center"><select onchange="changeShoes(this.selectedIndex);" size="1" name="Korea">

<option>228</option>

<option>231</option>

<option>235</option>

<option>238</option>

<option>241</option>

<option>245</option>

<option>248</option>

<option>251</option>

<option>254</option>

<option>257</option>

<option>260</option>

<option>267</option>

<option>273</option>

<option>279</option>

<option>286</option>

<option>292</option>

</select></td>

<td align="center"><select onchange="changeShoes(this.selectedIndex);" size="1" name="inches">

<option>9</option>

<option>9.125</option>

<option>9.25</option>

<option>9.375</option>

<option>9.5</option>

<option>9.625</option>

<option>9.75</option>

<option>9.875</option>

<option>10</option>

<option>10.125</option>

<option>10.25</option>

<option>10.5</option>

<option>10.75</option>

<option>11</option>

<option>11.25</option>

<option>11.5</option>

</select></td>

<td align="center"><select onchange="changeShoes(this.selectedIndex);" size="1" name="centimeters">

<option>22.8</option>

<option>23.1</option>

<option>23.5</option>

<option>23.8</option>

<option>24.1</option>

<option>24.5</option>

<option>24.8</option>

<option>25.1</option>

<option>25.4</option>

<option>25.7</option>

<option>26</option>

<option>26.7</option>

<option>27.3</option>

<option>27.9</option>

<option>28.6</option>

<option>29.2</option>

</select></td>

<td align="center"><select onchange="changeShoes(this.selectedIndex);" size="1" name="millimeters">

<option>228</option>

<option>231</option>

<option>235</option>

<option>238</option>

<option>241</option>

<option>245</option>

<option>248</option>

<option>251</option>

<option>254</option>

<option>257</option>

<option>260</option>

<option>267</option>

<option>273</option>

<option>279</option>

<option>286</option>

<option>292</option>

</select></td>

</tr>

</tbody></table>

</center>

</form><br>

SmileyWar · August 19, 2011

Hello antonyfal thank you very much for you example, this will help me out loads.

Kudos

antonyfal · August 19, 2011

Awesome!!

lank (lank = south african slang word for many) people have helped me in this forum! glad i could help someone in return..

Sign In

Form with 4 pull downs, each pulldown giving the next one a preselected result

Recommended Posts

SmileyWar

Link to comment

Share on other sites

voip03

Link to comment

Share on other sites

SmileyWar

Link to comment

Share on other sites

voip03

Link to comment

Share on other sites

SmileyWar

Link to comment

Share on other sites

antonyfal

Link to comment

Share on other sites

SmileyWar

Link to comment

Share on other sites

antonyfal

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information