Form : auto-sélectionner un choix après avoir choisi une option?

Bonsoir à tous,

Je vous explique mon problème : je dispose d'un formulaire qui est en réalité un calculateur d'investissement. Dans ce formulaire, j'ai une dropdown list qui permet à l'utilisateur de sélectionner une option.

Comment diable pourrais-je faire pour que ce code, en fonction de l'élément choisi juste précédemment, choisissent automatiquement la valeur de la dropdown suivante?

***EDIT*** Prenons un exemple : Pour être sûr d'avoir bien saisi le schmilblick : si l'utilisateur choisi l'option 1 dans "interest rate in %" id=rate, j'aimerais que la dropdown list "Plan's duration" id=time se positionne sur 10 mois sans que l'utilisateur n'aie à cliquer dessus.

Je vous link le code en dur, javascript + html + css :

<script type="text/javascript">

	function interest(){
		var principal=document.getElementById('principal').value;
		var rate=document.getElementById('rate').value;
		var time=document.getElementById('time').value;
		var itype=document.getElementById('itype').value;
		var crate=1;
		var irate=rate/crate;
		var inttamt=document.getElementById('inttamt').value;
		var decimal=2;
		
				if( itype=='c' ){
					document.getElementById('inttamt').value=document.getElementById('principal').value/100*100+Math.round((document.getElementById('principal').value * Math.pow((1+irate/100),(time/1*crate))*1-principal*1 ) *100)/100;}
				
				if(itype=='s' ){
					document.getElementById('inttamt').value=document.getElementById('principal').value/100*100+Math.round(((document.getElementById('principal').value * rate * time/1)/100)*100)/100;}
						
				
				}
</script>

<style>
#outer{width:470px;background:#fff;text-align:center;}
#cover{border:2px solid #111;border-radius:7px;box-shadow:inset 0 0 13px #888;padding:7px 0}
.main{table-layout:fixed;width:94%;border:0;border-collapse:collapse;margin:0 auto;}
.main td{padding:0 8px;vertical-align:middle;text-align:left;border:0;font:500 11px arial}
.main input{width:96%;border:1px solid #ccc;margin:2px 0;padding:0 2%;height:17px;text-align:right;font:500 11px arial}
.main select{width:100%;border:1px solid #ccc;margin:2px 0;background:#fff;height:18px;font:500 11px arial}
.w50{width:50%}
.main button{width:40%;font:600 12px arial;margin-left:115px;}
</style>

<div id=outer>Interest Calculator
  <div id=cover>
  
	<form name=intt>
    	<table class=main>
        	<col class=w50>
            <col class=w40>
            	<tr><td>Principal Amount<td><input id=principal>
                <tr><td>Interest Rate in %<td><select id=rate>
                			<option value=1 selected>Option 1 </option>
                			<option value=2>Option 2</option>
                                        <option value=2.47>Option 3</option>
                                        <option value=1.5>Option 4</option>
                                         <option value=2.5>Option 5</option>
                                         <option value=4>Option 6</select></option>
                <tr><td>Plan's duration<td><select id=time>
                			 <option value=10 selected>10 mois</option>
                			 <option value=20>20 mois</option>
                                          <option value=30>30 mois</option>
                <tr><td>Coumpounding<td><select id=itype><option value=s selected>No<option value=c>Yes</select>
                <tr><td><button type=reset>Reset</button><td><button type=button onclick=interest()>Calculate</button>
                <tr><td>Total returns<td><input id=inttamt>
         </table>
     </form>
  </div>
</div>

Le but, dans ce code, serait d'autosélectionner le select id=time en fonction de ce qui a été choisi précédemment dans le select id=rate. OnChange très certainement, mais pour le moment, rien de ce que j'ai fait n'a fonctionner.

Merci d'avance pour votre aide. Je bidouille plus que je ne sais programmé malheureusement.
Modifié par Mooks (15 Aug 2014 - 22:54)

salut,
je suppose qu'il y a des tas de façons de faire. Je pense que pour commencer, tu devrais corriger certaines erreurs HTML sur ton code (balise mal fermées). Si non pour le truc, tu pourrais associer les valeurs de la première liste qui correspondent à celles de la seconde dans un tableau et appliquer un attribut selected au changement de la première.
Un court exemple vaut mieux qu'un long discours.