Building a dynamic select menu from values selected in other fields

Discussion in 'JavaScript' started by jackeapen, Jun 20, 2010.

0
  1. #1
    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:

    
<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]
    Code (markup):
     
    jackeapen, Jun 20, 2010 IP
  2. tdemetri

    tdemetri Peon

    Messages:
    39
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    hi jackeapen,

    you need to start targetting the IDs of the different option fields. here is some complete code for a slightly altered version of what i think you are explaining. try it, and by examening the code you should be able to figure out what is going on and alter it/ add to it as you see fit.

    i can break down the explanation if you need it - just let me know.

    
<html><script type="text/javascript">

var a=document.getElementById("semi11").value;
var b=document.getElementById("semi12").value;

function ChangeValue(){
	document.getElementById("op1").innerHTML = document.getElementById("semi11").value;
	a=document.getElementById("semi11").value;
	return (a);
}

function ChangeValue2(){
	document.getElementById("op2").innerHTML = document.getElementById("semi12").value;
	b=document.getElementById("semi12").value;
	return ( b);
}
function ChangeValue3(){
	document.getElementById("winner").style.visibility="visible";
	if(document.getElementById("semi13").value == "var4")
	   {document.getElementById("winz").value = a} else
	   if(document.getElementById("semi13").value == "var5")
	   {document.getElementById("winz").value = b}
}
</script>
<style type="text/css">
#winner {visibility:hidden; }
</style>
</head>

<body>

<b>Semi Final 1:</b><select id="semi11" class="select menufield_101" name="semi11" onchange="ChangeValue();">
<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>

<b>vs</b>

<select id="semi12" class="select menufield_101" name="semi12" onchange="ChangeValue2();">
<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>

<b>pick the winner here:</b>

<select id="semi13" class="select menufield_102" name="semi13" onchange="ChangeValue3();">
<option > appears here </option>
<option value="var4" id="op1"></option>
<option value="var5" id="op2"></option>
</select>

<div id="winner"><b> projected winner is :</b>
<input type="text" id="winz" value="winner?" /></div>

</body>
</html>
    Code (markup):
     
    tdemetri, Jun 21, 2010 IP
  3. jackeapen

    jackeapen Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks very much. now, my compelte script is here, for anyone else to use:

    

<script type="text/javascript">

function ChangeValue1(){
        document.getElementById("op1").innerHTML = document.getElementById("field_101").value;
document.getElementById("op1").value = document.getElementById("field_101").value;

}

function ChangeValue2(){
        document.getElementById("op2").innerHTML = document.getElementById("field_102").value;
document.getElementById("op2").value = document.getElementById("field_102").value;

}
function ChangeValue3(){
        document.getElementById("op3").innerHTML = document.getElementById("field_103").value;
document.getElementById("op3").value = document.getElementById("field_103").value;

}
function ChangeValue4(){
        document.getElementById("op4").innerHTML = document.getElementById("field_104").value;
document.getElementById("op4").value = document.getElementById("field_104").value;

}
function ChangeValue5(){
        var num = document.getElementById("field_105").selectedIndex;
        document.getElementById("op5").innerHTML = document.getElementById("field_105").options[num].text;
document.getElementById("op5").value = document.getElementById("field_105").options[num].text;

}
function ChangeValue6(){
        var num = document.getElementById("field_106").selectedIndex;
        document.getElementById("op6").innerHTML = document.getElementById("field_106").options[num].text;
document.getElementById("op6").value = document.getElementById("field_106").options[num].text;

}

function ChangeValue7(){
        var num1 = document.getElementById("field_106").selectedIndex;
        document.getElementById("op5").innerHTML = document.getElementById("field_106").options[num1].text;
document.getElementById("op5").value = document.getElementById("field_106").options[num1].text;

        var num2 = document.getElementById("field_107").selectedIndex;
        document.getElementById("op6").innerHTML = document.getElementById("field_107").options[num2].text;
document.getElementById("op6").value = document.getElementById("field_107").options[num2].text;

}


</script>

<body>
<center>
<b>Semi Final 1:</b><select id="field_101" class="select menufield_101" name="field_101" onchange="ChangeValue1();">
<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>
   <option value="England">England</option>

   <option value="France">France</option>
   <option value="Germany">Germany</option>
   <option value="Ghana">Ghana</option>
   <option value="Greece">Greece</option>
   <option value="Honduras">Honduras</option>
   <option value="Italy">Italy</option>

   <option value="Japan">Japan</option>
   <option value="Korea DPR">Korea DPR</option>
   <option value="Korea Republic">Korea Republic</option>
   <option value="Mexico">Mexico</option>
   <option value="Netherlands">Netherlands</option>
   <option value="New Zealand">New Zealand</option>

   <option value="Nigeria">Nigeria</option>
   <option value="Paraguay">Paraguay</option>
   <option value="Portugal">Portugal</option>
   <option value="Serbia">Serbia</option>
   <option value="Slovakia">Slovakia</option>
   <option value="Slovenia">Slovenia</option>

   <option value="South Africa">South Africa</option>
   <option value="Spain">Spain</option>
   <option value="Switzerland">Switzerland</option>
   <option value="Uruguay">Uruguay</option>
   <option value="USA">USA</option>


 </select>



<b>vs</b>



<select id="field_102" class="select menufield_101" name="field_102" onchange="ChangeValue2();">  <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>
   <option value="England">England</option>

   <option value="France">France</option>
   <option value="Germany">Germany</option>
   <option value="Ghana">Ghana</option>
   <option value="Greece">Greece</option>
   <option value="Honduras">Honduras</option>
   <option value="Italy">Italy</option>

   <option value="Japan">Japan</option>
   <option value="Korea DPR">Korea DPR</option>
   <option value="Korea Republic">Korea Republic</option>
   <option value="Mexico">Mexico</option>
   <option value="Netherlands">Netherlands</option>
   <option value="New Zealand">New Zealand</option>

   <option value="Nigeria">Nigeria</option>
   <option value="Paraguay">Paraguay</option>
   <option value="Portugal">Portugal</option>
   <option value="Serbia">Serbia</option>
   <option value="Slovakia">Slovakia</option>
   <option value="Slovenia">Slovenia</option>

   <option value="South Africa">South Africa</option>
   <option value="Spain">Spain</option>
   <option value="Switzerland">Switzerland</option>
   <option value="Uruguay">Uruguay</option>
   <option value="USA">USA</option>
 </select>



<b>pick the winner of this match here:</b>



<select id="field_105" class="select menufield_106" name="field_105" onchange="ChangeValue5();">
<option > Select a Finalist</option>
<option value="" id="op1"></option>
<option value="" id="op2"></option> </select>





<br/><br/>

<b>Semi Final 2:</b><select id="field_103" class="select menufield_101" name="field_103" onchange="ChangeValue3();">  <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>
   <option value="England">England</option>

   <option value="France">France</option>
   <option value="Germany">Germany</option>
   <option value="Ghana">Ghana</option>
   <option value="Greece">Greece</option>
   <option value="Honduras">Honduras</option>
   <option value="Italy">Italy</option>

   <option value="Japan">Japan</option>
   <option value="Korea DPR">Korea DPR</option>
   <option value="Korea Republic">Korea Republic</option>
   <option value="Mexico">Mexico</option>
   <option value="Netherlands">Netherlands</option>
   <option value="New Zealand">New Zealand</option>

   <option value="Nigeria">Nigeria</option>
   <option value="Paraguay">Paraguay</option>
   <option value="Portugal">Portugal</option>
   <option value="Serbia">Serbia</option>
   <option value="Slovakia">Slovakia</option>
   <option value="Slovenia">Slovenia</option>

   <option value="South Africa">South Africa</option>
   <option value="Spain">Spain</option>
   <option value="Switzerland">Switzerland</option>
   <option value="Uruguay">Uruguay</option>
   <option value="USA">USA</option>


 </select>



<b>vs</b>



<select id="field_104" class="select menufield_101" name="field_104"  onchange="ChangeValue4();"> <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>
   <option value="England">England</option>

   <option value="France">France</option>
   <option value="Germany">Germany</option>
   <option value="Ghana">Ghana</option>
   <option value="Greece">Greece</option>
   <option value="Honduras">Honduras</option>
   <option value="Italy">Italy</option>

   <option value="Japan">Japan</option>
   <option value="Korea DPR">Korea DPR</option>
   <option value="Korea Republic">Korea Republic</option>
   <option value="Mexico">Mexico</option>
   <option value="Netherlands">Netherlands</option>
   <option value="New Zealand">New Zealand</option>

   <option value="Nigeria">Nigeria</option>
   <option value="Paraguay">Paraguay</option>
   <option value="Portugal">Portugal</option>
   <option value="Serbia">Serbia</option>
   <option value="Slovakia">Slovakia</option>
   <option value="Slovenia">Slovenia</option>

   <option value="South Africa">South Africa</option>
   <option value="Spain">Spain</option>
   <option value="Switzerland">Switzerland</option>
   <option value="Uruguay">Uruguay</option>
   <option value="USA">USA</option>
 </select>



<b>pick the winner of this match here:</b>



<select id="field_106" class="select menufield_106" name="field_106" onchange="ChangeValue6();"> <option > Select a Finalist</option>
<option value="" id="op3"></option>
<option value="" id="op4"></option> </select>

<br/><br/><br/><center><b>..and the final winner is:</b>

<select id="field_107" class="select menufield_107" name="field_107" onchange="ChangeValue7();">
<option > Select Winner</option>
<option value="" id="op5"></option>
<option value="" id="op6"></option> </select></center> <br/>
    Code (markup):
     
    jackeapen, Jun 22, 2010 IP