...

View Full Version : Multiple dropdown input



DMR1712
09-12-2008, 03:52 PM
Hello everyone,

I am thinking of trying to make (read:copy/paste half the internet untill it works) a search option which works like this:

on a page there are multiple dropdownmenu's in which people choose brand, make, type etc of products. I would like to take the input from these boxes and put them in an (invisible if possible) search box.

So if people choose for example "Nike", "sport shoe" & "2008", the search box will be filled with "Nike sport shoe 2009"

Is this possible? I'm fairly new at JavaScript, so if this is a real dumb question... Sorry!

Thanks for any response!

jmrker
09-12-2008, 05:17 PM
Is this what you have in mind? :)


<html>
<head>
<title>Search Selections</title>
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Jay M. Rumsey, OD | http://www.nova.edu/~rumsey */

// For question from: http://codingforums.com/showthread.php?t=148706

function NewList(selObj,newObj) {
var selElem = document.getElementById(selObj);
var selIndex = selElem.selectedIndex;
var newElem = document.getElementById(newObj);
var tmp = '';
newElem.options.length = 0;
for (var i=0; i<selElem.options.length; i++) {
tmp = selElem.options[i].value;
if (i != selIndex) { newElem.options[newElem.options.length] = new Option(tmp,tmp); }
}
}

function ShowSelections() {
alert(document.getElementById('SBox0').value
+' '+document.getElementById('SBox1').value
+' '+document.getElementById('SBox2').value);
// replace alert with storage to hidden element (?) for searching purposes.
}
</script>
</head>
<body>

<table>
<tr>
<td>
<select id="SBox0" onclick="NewList('SBox0','SBox1')">
<option value="Nike">Nike</option>
<option value="Addis">Addis</option>
<option value="Rockport">Rockport</option>
<option value="Sport shoe">Sport shoe</option>
<option value="Walking shoe">Walking shoe</option>
<option value="Running shoe">Running shoe</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
</select>
</td>
<td>
<select id="SBox1" onclick="NewList('SBox1','SBox2')">
<option value=""></option>
</select>
</td>
<td>
<select id="SBox2">
<option value=""></option>
</select>
</td>
</tr>
</table>
<button onclick="ShowSelections()">Search</button>

</body>
</html>

List can be easily expanded.

Good Luck!:thumbsup:

DMR1712
09-12-2008, 09:44 PM
Wow thatīs fast! I think I can really do something with this.

I changed it just a bit, because i didnīt need (I think) the " onclick="NewList('SBox1','SBox2')" , because that made the menu's change, which I did not need. I deleted that and now it does what i wanted!
I first have to create the page which it will be on, but when it's totally done I'll post the 'final' code which I used.

Thanks again!

DMR

jmrker
09-13-2008, 12:41 AM
What the 'NewList' function does is repeat all the values in the preceding selectbox except for the particular one previously chosen. This eliminates the possibility of duplicate entries in the search function that you said you wanted to create. I'll look forward to your final attempt.

Anyway, you're most welcome.
Glad I was able to help.
Good Luck! :)

DMR1712
09-13-2008, 10:27 AM
I changed it into:


<select id="SBox0">
<option value="Nike">Nike</option>
<option value="Addis">Addis</option>
<option value="Rockport">Rockport</option>
</select>
</td>
<td>
<select id="SBox1">
<option value="Sport shoe">Sport shoe</option>
<option value="Walking shoe">Walking shoe</option>
<option value="Running shoe">Running shoe</option>
</select>
</td>
<td>
<select id="SBox2">
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
</select>

that way the dropdowns are separated, so no duplicate entries are possible

I'll let you know when I finish it, I have to make the other page first, but didn't think I'd get a response this fast!:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum