...

View Full Version : Building a dynamic select menu from values selected in other fields



jackeapen
06-21-2010, 06:44 AM
Hi,

i'm trying to build a small script for predicting Worldcup football winners. participants have to predict the teams in both the semi finals and final. a select menu with all participating countries will be given for 2 semi finals. suppose if a persons selects Argentina and Brazil for Semi 1, then the values of Final select menu should be Argentina and Brazil. Similarly for Semi 2, if Denmark and Italy selected, then the select menu for final2 should be Denmark and Italy.

could someone help with the javascript for this? my html (with only a few no. of countries is below:

[CODE]
<b>Semi Final 1:</b><select id="semi11" class="select menufield_101" name="semi11" onchange="ChangeValue(this);">
<option value="empty">Select a SemiFinalist</option>
<option value="Algeria">Algeria</option>
<option value="Argentina">Argentina</option>
<option value="Australia">Australia</option>
<option value="Brazil">Brazil</option>
<option value="Cameroon">Cameroon</option>
<option value="Chile">Chile</option>
<option value="Côte d'Ivoire">Côte d'Ivoire</option>
<option value="Denmark">Denmark</option>
</select>
<select id="semi12" class="select menufield_102" name="semi12" onchange="ChangeValue(this);">
<option value="empty">Select a Continent</option>
<option value="Algeria">Algeria</option>
<option value="Argentina">Argentina</option>
<option value="Australia">Australia</option>
<option value="Brazil">Brazil</option>
<option value="Cameroon">Cameroon</option>
<option value="Chile">Chile</option>
<option value="Côte d'Ivoire">Côte d'Ivoire</option>
<option value="Denmark">Denmark</option>
<option value="England">England</option>
</select>
<br/>
<b>Semi Final 2:</b><select id="semi21" class="select menufield_103" name="semi21" onchange="ChangeValue(this);">
<option value="empty">Select a Continent</option>
<option value="Algeria">Algeria</option>
<option value="Argentina">Argentina</option>
<option value="Australia">Australia</option>
<option value="Brazil">Brazil</option>
<option value="Cameroon">Cameroon</option>
<option value="Chile">Chile</option>
<option value="Côte d'Ivoire">Côte d'Ivoire</option>
<option value="Denmark">Denmark</option>
<option value="England">England</option>
<option value="France">France</option>
</select>
<select id="semi22" class="select menufield_104" name="semi22" onchange="ChangeValue(this);">
<option value="empty">Select a Continent</option>
<option value="Algeria">Algeria</option>
<option value="Argentina">Argentina</option>
<option value="Australia">Australia</option>
<option value="Brazil">Brazil</option>
<option value="Cameroon">Cameroon</option>
<option value="Chile">Chile</option>
<option value="Côte d'Ivoire">Côte d'Ivoire</option>
<option value="Denmark">Denmark</option>
<option value="England">England</option>
<option value="France">France</option>
</select>
<br/>
<label for="field_106">Select Finalists</label>
<select id="field_106" class="select menufield_106" name="final1">
<option value="0">Select a country</option>
</select>
<select id="field_106" class="select menufield_107" name="final2">
<option value="0">Select a country</option>
</select>
[CODE]

Philip M
06-21-2010, 07:26 AM
As the four select lists are the same it would seem simpler to combine them:-


<form name='myform'>
<select name = 'list1' id = 'list1' onchange = "removeOptions(this)">
<option value="empty">Select Four SemiFinalists</option>
<option value="Algeria">Algeria</option>
<option value="Argentina">Argentina</option>
<option value="Australia">Australia</option>
<option value="Brazil">Brazil</option>
<option value="Cameroon">Cameroon</option>
<option value="Chile">Chile</option>
<option value="Côte d'Ivoire">Côte d'Ivoire</option>
<option value="Denmark">Denmark</option>
<option value="England">England</option>
<option value="France">France</option>
</select>

<select name = 'list2' id = 'list2'>
<option value = ""> You have selected:- </option>
</select>

</form>

<script type = "text/javascript">
var val = "";
var count = 0;
function removeOptions(selectbox) {
if (count >=4) {
alert ("You have already selected four semi-finalists")
return false;
}
val = selectbox.value;
for (var i = selectbox.options.length-1; i>=1; i--) {
if (selectbox.options[i].selected) {
selectbox.remove(i);
addOption(document.myform.list2,val,val);
document.myform.list1.focus();
count ++;
}
}
}

function addOption(selectbox,optiontext,optionvalue ) {
var optn = document.createElement("OPTION");
optn.text = optiontext;
optn.value = optionvalue;
selectbox.options.add(optn);
}

</script>

"A psychiatrist asks a lot of expensive questions that your wife asks for nothing." – Joey Adams



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum