Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Building a dynamic select menu from values selected in other fields

    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]

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    As the four select lists are the same it would seem simpler to combine them:-

    Code:
    <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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •