I need to get the selections into the search box

Discussion in 'JavaScript' started by Coldwin, Mar 28, 2011.

0
  1. #1
    The code to do this is beyond me :(


    
<html>
<!-- Created on: 3/24/2011 -->
<head>
<script type="text/javascript">

var categories = [];
categories["startList"] = ["Activa","Bell Horn","Diabetic Crew","Futuro","Jobst","Sensifoot","TruSock"]
categories["Activa"] = ["Male","Female"]
categories["Bell Horn"] = ["Male","Female"]
categories["Diabetic Crew"] = ["Male","Female"]
categories["Futuro"] = ["Male","Female"]
categories["Jobst"] = ["Male","Female"]
categories["Sensifoot"] = ["Male","Female"]
categories["TruSock"] = ["Male","Female"]
categories["Male"] = ["Ankle High","Crew","Knee High"];
categories["Female"] = ["Ankle High","Crew","Knee High"];
categories["Ankle High"] = ["8-15 mmHg","15-20 mmHg","20-30 mmHg","30-40 mmHg"];
categories["Crew"] = ["8-15 mmHg","15-20 mmHg","20-30 mmHg", "30-40 mmHg"];
categories["Knee High"] = ["8-15 mmHg", "15-20 mmHg", "20-30 mmHg", "30-40 mmHg"];
categories["8-15 mmHg"] = ["Casual","Dress"];
categories["15-20 mmHg"] = ["Casual","Dress"];
categories["20-30 mmHg"] = ["Casual","Dress"];
categories["30-40 mmHg"] = ["Casual","Dress"];



var nLists = 5; // number of select lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}

function getValue(L4, L3, L2, L1, L5) {
alert("Your selection was:- \n" + L2 + "\n" + L1 + "\n" + L3 + "\n" + L4 + "\n" + L5);
}

function init() {
fillSelect('startList',document.forms['tripleplay']['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>

</head>
<body>

<table border="0" summary="">
<tr>
<td><BR>
<b>Brand: </b><BR>
<b>Gender: </b><BR>
<b>Cut: </b><BR>

<b>Compression: </b><BR>
<b>Style: </b> </td>


<td><BR> <BR> <form name="tripleplay" action="">

</b><select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Make a selection</option>
</select>
<BR>


</b><select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Make a selection</option>
</select>
<BR>


<select name='List3' onchange="fillSelect(this.value,this.form['List4'])">
<option selected>Make a selection</option>
</select>
<BR>


<select name='List4' onchange="fillSelect(this.value,this.form['List5'])">

<option selected>Make a selection</option>
</select>
<BR>


<select name='List5' onchange="getValue(this.value, this.form['List1'].value,
this.form['List1'].value)">
<option selected >Make a selection</option>
</select>
</form>




</td>
</tr>

</table>

<input type="text" name="testField" maxlength="50" size="30" value="This is where I want the result to go.">



</body>
</html>
    Code (markup):
     
    Coldwin, Mar 28, 2011 IP
  2. Jan Novak

    Jan Novak Peon

    Messages:
    121
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    0
    #2
    I don't know exactly what you need, try this...

    

        <html>
        <!-- Created on: 3/24/2011 -->
        <head>
        <script type="text/javascript">
        
        var categories = [];
    categories["startList"] = ["Activa","Bell Horn","Diabetic Crew","Futuro","Jobst","Sensifoot","TruSock"]
    categories["Activa"] = ["Male","Female"]
    categories["Bell Horn"] = ["Male","Female"]
    categories["Diabetic Crew"] = ["Male","Female"]
    categories["Futuro"] = ["Male","Female"]
    categories["Jobst"] = ["Male","Female"]
    categories["Sensifoot"] = ["Male","Female"]
    categories["TruSock"] = ["Male","Female"]
    categories["Male"] = ["Ankle High","Crew","Knee High"];
    categories["Female"] = ["Ankle High","Crew","Knee High"];
    categories["Ankle High"] = ["8-15 mmHg","15-20 mmHg","20-30 mmHg","30-40 mmHg"];
    categories["Crew"] = ["8-15 mmHg","15-20 mmHg","20-30 mmHg", "30-40 mmHg"];
    categories["Knee High"] = ["8-15 mmHg", "15-20 mmHg", "20-30 mmHg", "30-40 mmHg"];
    categories["8-15 mmHg"] = ["Casual","Dress"];
    categories["15-20 mmHg"] = ["Casual","Dress"];
    categories["20-30 mmHg"] = ["Casual","Dress"];
    categories["30-40 mmHg"] = ["Casual","Dress"];
    
    
    
    var nLists = 5; // number of select lists in the set
    
    function fillSelect(currCat,currList){
        var step = Number(currList.name.replace(/\D/g,""));
        for (i=step; i<nLists+1; i++) {
            document.forms['tripleplay']['List'+i].length = 1;
            document.forms['tripleplay']['List'+i].selectedIndex = 0;
        }
        var nCat = categories[currCat];
        for (each in nCat) {
            var nOption = document.createElement('option');
            var nData = document.createTextNode(nCat[each]);
            nOption.setAttribute('value',nCat[each]);
            nOption.appendChild(nData);
            currList.appendChild(nOption);
        }
    }
    
    function getValue(L4, L3, L2, L1, L5) {
        //alert("Your selection was:- \n" + L2 + "\n" + L1 + "\n" + L3 + "\n" + L4 + "\n" + L5);
        document.getElementById('testField').value=L2 + ", " + L1 + ", " + L3 + ", " + L4 + ", " + L5;
    }
    
    function init() {
        fillSelect('startList',document.forms['tripleplay']['List1'])
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
    
        </script>
        
        </head>
        <body>
        
        <table border="0" summary="">
        <tr>
        <td><BR>
        <b>Brand: </b><BR>
        <b>Gender: </b><BR>
        <b>Cut: </b><BR>
        
        <b>Compression: </b><BR>
        <b>Style: </b> </td>
        
        
        <td><BR> <BR> <form name="tripleplay" action="">
        
        </b><select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
        <option selected>Make a selection</option>
        </select>
        <BR>
        
        
        </b><select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
        <option selected>Make a selection</option>
        </select>
        <BR>
        
        
        <select name='List3' onchange="fillSelect(this.value,this.form['List4'])">
        <option selected>Make a selection</option>
        </select>
        <BR>
        
        
        <select name='List4' onchange="fillSelect(this.value,this.form['List5'])">
        
        <option selected>Make a selection</option>
        </select>
        <BR>
        
        
        <select name='List5' onchange="getValue(this.form['List4'].value, this.form['List3'].value, this.form['List2'].value, this.form['List1'].value, this.value)">
        <option selected >Make a selection</option>
        </select>
        </form>
        
        
        
        
        </td>
        </tr>
        
        </table>
        
        <input type="text" name="testField" id="testField" maxlength="50" size="30" value="This is where I want the result to go.">
        
        
        
        </body>
        </html>
    Code (markup):
     
    Jan Novak, Mar 29, 2011 IP