Log in

View Full Version : need help with drop down menu


davthewav
08-16-2007, 10:04 AM
hi to everyone!
just joned this site, so hope your all doing well.....

i'm wondering if anyone can help me out with this problem....i'm trying to get javascript running which would have a drop down menu in which i could pick from one of....say 20/30 options....i would then want one of those options to be placed into a text box....on the same page, then to pick another option from the drop down menu and this then would be placed into another text box....say just underneath the first text box.....the code that i have at the moment is this:

<html>

<head>
<title>chose a team</title>

<script type='text/javascript'>

function doIt(selNum)
{
var selObj = document.theForm['rank'+selNum];
var prevNum = selNum-1;
var prevSel = document.theForm['rank'+prevNum]

selObj.options.length = 0;
for (var i = 0; i < prevSel.length; i++)
{
if (! prevSel.options[i].selected)
{
newItem = selObj.options.length;
selObj.options[newItem] = new Option(prevSel.options[i].text,

prevSel.options[i].value);
}
else {
document.theForm['text'+(selNum-1)].value = prevSel.options[i].text;
}
}
}


</script>

</head>

<body>
<h1><center>Chose a Team</center></h1>
<p>The teams</p>

<form name='theForm'><br>
<center><select name='rank1'onchange="doIt(2)">
<option value='Arsenal'>Arsenal</option>
<option value="Aston Villa">Aston Villa</option>
<option value="Birmingham">Birmingham</option>
<option value="Bolton">Bolton</option>
<option value="Chelsea">Chelsea</option>
<option value="Derby">Derby</option>
<option value="Everton">Everton</option>
<option value="Fulham">Fulham</option>
<option value="Liverpool">Liverpool</option>
<option value="Manchester City">Manchester City</option>
<option value="Manchester Utd">Manchester Utd</option>
<option value="Middlesboro">Middlesboro</option>
<option value="end of selection">end of selection</option>
</select></center><br>



<input type="text" name="text1"/>
<center><select name='rank2' onchange="doIt(3)">
</select></center>

<input type="text" name="text2"/>
<center><select name='rank3' onchange="doIt(4)">
</select></center>


<input type="text" name="text3"/>
<center><select name='rank4'>
</select></center>





</form>

</body>

</html>


as you can see this code gives me other drop down menus.....which i want to get rid of......but i can't work out how to do this.

any help would be very welcome

thanks

dav
jscheuer1
08-16-2007, 11:58 AM
Try this out:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rank the Teams</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.fcenter {
text-align:center;
}
fieldset {
width:11em;
}
legend {
border:1px solid gray;
padding:0 1ex;
}
#end {
color:gray;
}
</style>
<script type="text/javascript">
function doIt(el){
var selObj = el, theForm=el.form, v=doIt.vals.length;
if(theForm['text'+doIt.num]){
for (var i = 0; i < v; i++)
if(selObj.value==doIt.vals[i]){
selObj.options[0].selected=1;
return;
}
doIt.vals[v]=theForm['text'+(doIt.num++)].value = selObj.value;
}
if(!theForm['text'+doIt.num]){
selObj.options[selObj.options.length-1].selected=1;
selObj.disabled=1;
}
}

function resetFunc(el){
doIt.num=1;
if(el)
el.form.rank.disabled=0;
doIt.vals=null;
doIt.vals=['end of selection', 'Rank Teams'];
return true;
}

resetFunc();
</script>

</head>

<body>
<h1 class="fcenter">Rank the Teams</h1>

<form action="#">
<div class="fcenter"><select name="rank" onchange="doIt(this);">
<option selected value="Rank Teams">Rank Teams</option>
<option value='Arsenal'>Arsenal</option>
<option value="Aston Villa">Aston Villa</option>
<option value="Birmingham">Birmingham</option>
<option value="Bolton">Bolton</option>
<option value="Chelsea">Chelsea</option>
<option value="Derby">Derby</option>
<option value="Everton">Everton</option>
<option value="Fulham">Fulham</option>
<option value="Liverpool">Liverpool</option>
<option value="Manchester City">Manchester City</option>
<option value="Manchester Utd">Manchester Utd</option>
<option value="Middlesboro">Middlesboro</option>
<option id="end" value="end of selection">end of selection</option>
</select><br>
</div>

<fieldset><legend>The Teams</legend>
<p><input type="text" name="text1"/></p>

<p><input type="text" name="text2"/></p>

<p><input type="text" name="text3"/></p>
</fieldset>

<p class="fcenter"><input type="reset" onclick="return resetFunc(this);" value="Reset"></p>

</form>

</body>

</html>
jscheuer1
08-16-2007, 12:20 PM
This might be better:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rank the Teams</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.fcenter {
text-align:center;
}
fieldset {
width:11em;
}
legend {
border:1px solid gray;
padding:0 1ex;
}
#end {
color:gray;
}
</style>
<script type="text/javascript">
function doIt(el){
var selObj = el, theForm=el.form, v=doIt.vals.length;
if(theForm['text'+doIt.num]){
for (var i = 0; i < v; i++)
if(selObj.value==doIt.vals[i]){
selObj.options[0].selected=1;
return;
}
doIt.vals[v]=theForm['text'+(doIt.num++)].value = selObj.value;
}
if(!theForm['text'+doIt.num]){
selObj.options[selObj.options.length-1].selected=1;
selObj.disabled=1;
}
}

function resetFunc(el){
doIt.num=1;
if(el&&el.form)
el.form.rank.disabled=0;
else
document.forms.ranks.reset();
doIt.vals=null;
doIt.vals=['end of selection', 'Rank Teams'];
return true;
}

onload=resetFunc;
</script>

</head>

<body>
<h1 class="fcenter">Rank the Teams</h1>

<form name="ranks" action="#">
<div class="fcenter"><select name="rank" onchange="doIt(this);">
<option selected value="Rank Teams">Rank Teams</option>
<option value='Arsenal'>Arsenal</option>
<option value="Aston Villa">Aston Villa</option>
<option value="Birmingham">Birmingham</option>
<option value="Bolton">Bolton</option>
<option value="Chelsea">Chelsea</option>
<option value="Derby">Derby</option>
<option value="Everton">Everton</option>
<option value="Fulham">Fulham</option>
<option value="Liverpool">Liverpool</option>
<option value="Manchester City">Manchester City</option>
<option value="Manchester Utd">Manchester Utd</option>
<option value="Middlesboro">Middlesboro</option>
<option id="end" value="end of selection">end of selection</option>
</select><br>
</div>

<fieldset><legend>The Teams</legend>
<p><input type="text" name="text1"/></p>

<p><input type="text" name="text2"/></p>

<p><input type="text" name="text3"/></p>
</fieldset>

<p class="fcenter"><input type="reset" onclick="return resetFunc(this);" value="Reset"></p>

</form>

</body>

</html>
davthewav
08-16-2007, 01:12 PM
jscheuer1.....you are a star!!!!!!!!!!

that's exactly what i've been searching for

it's taken a few days to find this/you hehe

thanks mate!

dav