Sujet Précédent Sujet Suivant

Mettre des valeur dans un menu déroulant

Fermé
iTonton - 26 déc. 2012 à 19:54
Heliotte Messages postés 1491 Date d'inscription vendredi 26 octobre 2012 Statut Membre Dernière intervention 28 janvier 2013 - 29 déc. 2012 à 14:22
Bonjour chers membres de CCM,
Pour faire simple je suis en train de penser un créateur de configuration, voila le code source que je bricole pour additionner les prix obtenir le prix de la config : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <HTML>
  <HEAD>
  <LINK rel="stylesheet" type="text/css" href="style.css">
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-1">
  <body style="background-image:url(bg.png);background-repeat:repeat;	background-attachment:fixed;"> 
  <TITLE>Cfg Creator</TITLE>
  </HEAD>
  
  <BODY>
	<script type="text/javascript">
	function computeResult() {
		var result = document.getElementById('result');
		
		var value1 = document.getElementById('field1').value;
		var value2 = document.getElementById('field2').value;
		var value3 = document.getElementById('field3').value;
		var value4 = document.getElementById('field4').value;
		var value5 = document.getElementById('field5').value;
		var value6 = document.getElementById('field6').value;
		var value7 = document.getElementById('field7').value;
		if (testInt(value1) && testInt(value2) && testInt(value3)) {
			result.value = parseInt(value1) + parseInt(value2) + parseInt(value3) + parseInt(value4) + parseInt(value5) + parseInt(value6) + parseInt(value7);
		}
		else {
			alert('The value is not an integer');
		}
	}
	
	function testInt(value) {
		return value == parseInt(value);
	}
	</script>
</head>
<body>
                       <center> <P Align="justify"><h2>Calculateur de configuration</h2>

<table width="100%"> 
<tr> 
<td width="20%"> 
 <br>
<acronym title="recommencer"><a href="index.html"><img src="refresh.png"></a></acronym><br><br>
<acronym title="sauvearder"><img src="save.png" ONCLICK="JavaScript:saveAs('page.html')"></acronym>



</td>
<td width="80%">
<h4>Carte mere :<br><select>
<option disabled>Choisir marque</option>
<option>MSI</option>
<option>Asus</option>
<option>AsRock</option>
<option>Gigabyte</option>
<option>Intel</option>
</select><input type="text" placeholder="reference">
<input type="text" id="field1" onChange="computeResult();" value="0"></input><BR><br>
Carte Graphique:<br><select>
<option disabled>Choisir marque</option>
<option>Nvidia</option>
<option>AMD</option>
</select><input type="text" placeholder="reference">
<input type="text" id="field2" onChange="computeResult();" value="0"></input><BR><br>
Processeur :<br><select>
<option disabled>Choisir marque</option>
<option>Intel</option>
<option>AMD</option>
</select><input type="text" placeholder="reference">
<input type="text" id="field3" onChange="computeResult();" value="0"></input><BR><br>
Disque dur :<br><select>
<option disabled>Choisir quantite</option>
<option>250 GB</option>
<option>500 GB</option>
<option>750 GB</option>
<option>1 TO</option>
</select><input type="text" placeholder="reference">
<input type="text" id="field4" onChange="computeResult();" value="0"></input><BR><br>
RAM :<br><select>
<option disabled>Choisir quantite</option>
<option>1024 mb</option>
<option>2048 mb</option>
<option>4096 mb</option>
<option>8192 mb</option>
</select><input type="text" placeholder="reference">
<input type="text" id="field5" onChange="computeResult();" value="0"></input><BR><br>
Boitier:<br><select>
<option disabled>Choisir marque</option>
<option>Advance</option>
<option>Cooler Master</option>
<option>Corsair</option>
<option>NZXT<option>
</select><input type="text" placeholder="reference">
<input type="text" id="field6" onChange="computeResult();" value="0"></input><BR><br>
Alientation:<br><select>
<option disabled>Choisir puissance</option>
<option>300 Watts</option>
<option>400 Watts</option>
<option>500 Watts</option>
<option>600 Watts</option>
<option>700 Watts</option>
<option>800 Watts</option>
<option>900 Watts</option>
<option>1000 Watts</option>
</select><input type="text" placeholder="reference">
<input type="text" id="field7" onChange="computeResult();" value="0"></input><BR><br>
<br><br>

<span> Prix de la configuration :<br></span><input type="text" id="result" value="0"></input><br><br>
 </td>
 </tr>

</body>
</html>

Dans mon code si je veux un core i5 760, je suis obligé de choisir Intel puis dire la référence et le prix, mon idée est d'avoir un menu déroulant dans lequel je clic sur le proc que je veux et ça renseigne la variable dans le JS sans que j'ai a intervenir. N'hésitez pas à me solliciter si vous ne saisissez pas ma question ;-)

Si vous trouvez un code qui fonctionne je vous ferrais un gros câlin :-P

A voir également:

3 réponses

Réponse 1 / 3
Heliotte Messages postés 1491 Date d'inscription vendredi 26 octobre 2012 Statut Membre Dernière intervention 28 janvier 2013 92
27 déc. 2012 à 14:57
Bonjour iTonton,

Je ne sais pas si c'est fait exprès ou si c'est un problème de copier/coller, mais il est incorrect au point de vue structure .. DOCTYPE en double, </head> en double, <body> en double, etc.

Pour ta demande, regarde du côté des "optgroup": 
<select>
   <optgroup label="Europe">
      <option>France</option>
      <option>Espagne</option>
      <option>Angleterre</option>
   </optgroup>
   <optgroup label="Amérique" disabled="disabled">
      <option>Etats-Unis</option>
      <option>Mexique</option>
      <option>Canada</option>
      <option>Brésil</option>
   </optgroup>
</select>
0
iTonton
29 déc. 2012 à 11:00
Salut Heliotte,
Ce n'est pas vraiment ce que je souhaitais savoir, mais grâce à toi j'ai appris une nouvelle notion ;-)
En effet pour le Doctype en double c'est une maladresse de ma part lors du copier/coller :-)

En réalité je voulais ajouté une valeur dans le menu déroulant, par exemple je prends une GTX550ti Gainward dans le menu et ça renseigne immédiatement 109 dans le champs en JS (celui de l'addition) ;-)
0
Réponse 2 / 3
Heliotte Messages postés 1491 Date d'inscription vendredi 26 octobre 2012 Statut Membre Dernière intervention 28 janvier 2013 92
29 déc. 2012 à 13:18
Salut iTonton,

En Javascript sur l'évènement OnChange d'une liste .. à répéter pour les sept listes .. dans la function JS, une condition . SI GetElementParId == xx ALORS xx
0
Réponse 3 / 3
Heliotte Messages postés 1491 Date d'inscription vendredi 26 octobre 2012 Statut Membre Dernière intervention 28 janvier 2013 92
Modifié par Heliotte le 29/12/2012 à 14:23
Un exemple concret .. 

Code HTML:  
Carte mere :<br />  
 <select id="CMere" onchange="ListeActu()">  
  <option disabled>Choisir marque</option>  
  <option value="0">MSI</option>  
  <option value="1">Asus</option>  
  <option value="2">AsRock</option>  
  <option value="3">Gigabyte</option>  
  <option value="4">Intel</option>  
 </select>  

Code JS:  
function ListeActu()  
{  
 if (document.getElementById('CMere').selectedIndex == 1) { document.getElementById('field1').value="MSI"; }  
 if (document.getElementById('CMere').selectedIndex == 2) { document.getElementById('field1').value="Asus"; }  
 if (document.getElementById('CMere').selectedIndex == 3) { document.getElementById('field1').value="AsRock"; }  
 if (document.getElementById('CMere').selectedIndex == 4) { document.getElementById('field1').value="Gigabyte"; }  
 if (document.getElementById('CMere').selectedIndex == 5) { document.getElementById('field1').value="Intel"; }  
}
0

Discussions similaires

Problème de restrictions
SuperAmbi -
Pat -

5 réponses
Suppression listes déroulantes
Archa -
Sam -

5 réponses
Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses