onchange populate select boxes ( newbie question )

Discussion in 'JavaScript' started by cyclopsvs, Sep 25, 2006.

0
  1. #1
    Hello Javascript users,

    I'm just starting to learn how to use javascript so my apology's if my question sound stupid.

    I want to try the following i have two select boxes where in the first one there is a list of methods which can be chosen. The second select box has to give the equipment that belongs to the method chosen in the first select box.

    for example i have
    method1 which has three equipment codes equip1,equip2,equip3
    and method2 has two equipment codes equip6,equip7

    i figured out that i had to use onchange populate and tried with some online documentation but i really can't get to the end result where all boxes are filles

    the code i have till now is with a textfield instead of a second selectbox

    <script language="javascript">
    function changetext(Dropdown_Val, Dropdown_Val_SI)
    {
    switch (Dropdown_Val[Dropdown_Val_SI].value)
    {
    case 'Method2' :
    document.MyForm.TextField.value="Method2";
    break
    case 'Method3' :
    document.MyForm.TextField.value="Method3";
    break
    default :
    document.MyForm.TextField.value="No Value";
    break
    }
    }
    </script>

    <form name="MyForm">
    <select name="DropField" onChange="changetext(this,this.selectedIndex);">
    <option value="Method1">Method1</option>
    <option value="Method2">Method2</option>
    <option value="Method3">Method3</option>
    </select>
    <input type="text" name="TextField">
    </form>"""

    can anyone help me out with this problem

    thanks in advance for your time,

    richard mendes
     
    cyclopsvs, Sep 25, 2006 IP
  2. Evoleto

    Evoleto Well-Known Member

    Messages:
    253
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    108
    #2
    Hi Richard,

    Here's my proposed solution. Please note that it is expandable to as much options both for the main dropdown and for the secondary one, by editing the secondOptions array and the main options:

    
<html>
<head>
<script type='text/javascript'>
var secondOptions = {
1 : [ ['Equip 1', 1] , ['Equip 2', 2] , ['Equip 3', 3] ],
2 : [ ['Equip 4', 4] , ['Equip 5', 5] , ['Equip 6', 6] ],
3 : [ ['Equip 7', 7] , ['Equip 8', 8] , ['Equip 9', 9] ]
};

function UpdateSecondary( sel ) {
	var secondsel = document.getElementById('secsel');
	var selvalue = sel.options[sel.selectedIndex].value;
	var count = secondOptions[ selvalue ].length;
	
	// Clearing the previous options
	
	secondsel.options.length = 0;
		
	// Setting the new options	
	
	for( i = 0 ; i < count ; i++ )
		secondsel.options[i] = new Option( secondOptions[selvalue][i][0], secondOptions[selvalue][i][1] );
}

</script>
</head>
<body>

<select id='mainsel' name='mainsel' onChange="UpdateSecondary(this);">
<option value='1'>Method 1</option>
<option value='2'>Method 2</option>
<option value='3'>Method 3</option>
</select>

<br><br>

<select id='secsel' name='secsel'>
<option>No selection made yet</option>
</select>

</body>
</html>
    Code (markup):
    Successfully tested with Gecko and IE.
    Good luck! :D
     
    Evoleto, Sep 25, 2006 IP
  3. cyclopsvs

    cyclopsvs Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank's a lot

    this is a big help and it's really clear how it works.

    richard
     
    cyclopsvs, Sep 25, 2006 IP
  4. penagate

    penagate Guest

    Messages:
    277
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi!

    Instead of the onchange attribute, which rather muddles HTML and Javascript; use an event listener, which is a pure JS solution. Document structure, scripting, and presentation, should all be kept as separate as possible.

    Use my event listener wrapper functions if you like, to ease browser compatibility. Search for addEventListener, in particular the Mozilla Developer Centre page, if you would like further explanation.

    Regards
    - P
     
    penagate, Sep 27, 2006 IP