Optimisation code Jquery

Bonjour le monde

J'ai malheureusement perdu mon ancien compte bêtement....
Je viens vers vous pas pour un problème, car mon code fonctionne mais plus pour voir avec vous comment optimiser mon compte.

Mon cas : J'ai un formulaire dynamique, selon la sélectionne de certain champ j'en affiche de nouveau. Si l'utilisateur change de choix, je fais disparaître mes nouveaux champs.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<div class="col-lg-6">
            <div class="form-group">
                <label>Type de demande : </label>
 
                <select name="type de demande" class="demande-info" >
                	<option value="" selected="selected"></option>
                	<optgroup label="General">
                		<option value="4">Account / License</option>
                		<option value="38">Feature request</option>
                		<option value="37">Partnership</option>
                		<option value="2">Pre-sale</option>
                		<option value="3">Product information</option>
                		<option value="1">Technical support</option>
                	</optgroup>
                </select>
 
            </div>
        </div>
 
        <div class="col-lg-6">
            <div class="form-group">
                <label for="ct_product_id">Product :</label>                    
                <select class="type-produit" id="ct_product_id">
                    <option></option>
                    <option value="1454">Produit 1</option>
                    <option value="1466">Produit 2</option>
                    <option value="1234">Produit 3</option>
                    <option value="1322">Produit 4.1</option>
                    <option value="1461">Produit 4.2</option>
                    <option value="1458">Produit 4.3</option>
                </select>
            </div>
        </div>
 
        <div class="col-lg-6">
        	<div class="form-group" id="numberProduct">
                <label for="ct_product_id">Number of product :</label>
			    <select class="" id="ct_product_number">
			      <option value="0">0</option>
			      <option value="1">0 - 500</option>
			      <option value="2">500 - 2 000</option>
			      <option value="3">2 000 - 5 000</option>
			      <option value="3">+ 10 000</option>
			  	</select>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="form-group" id="selectLetter">
                <label for="ct_product_id">Select a letter :</label>
			  	<select class="form-control input-lg" id="ct_letter">
			      <option value="1"></option>
			      <option value="2">aaa</option>
			      <option value="3">bbb</option>
			      <option value="3">ccc</option>
			      <option value="3">ddd</option>
			      <option value="3">eee</option>
			      <option value="3">fff</option>
			  	</select>
			</div>
		</div>

Un peu de CSS pour masquer les champs que je ne souhaite pas voir au debut

Code:

1
2
3
4
5
6
7
8
.contact-us #numberProduct{
    display: none;
    //opacity: 0;
}
.contact-us #selectLetter{
    display: none;
    //opacity: 0;
}

J'utilise donc du Jquery. J'ecoute mes 2 premiers champs "Type de demande" et "Produit".
Si l'utilisateur selectionne "Pre-sale" "Product information" dans type de demande et un produit 4.dans "Product", j'affiche les autre champs.
Si l'utilisateur désélectionne les précédent champs, j'annule l'affichage des autres champs

Voilà mon Jquerry

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
(function ($) {
		$(".demande-info").change(function(){
		  var demande_info = $(".demande-info").val();
		  var type_produit = $(".type-produit").val();
                 // Verification selon la valeur des champs
		  if((demande_info == "3" || demande_info == "2") && (type_produit =="1322" || type_produit =="1461" || type_produit =="1458")){
		    $("#numberProduct").fadeIn();
		    $("#selectLetter").fadeIn();
		  }else{
		    $("#numberProduct").fadeOut();
		    $("#selectLetter").fadeOut();
		  }
		});
		$(".type-produit").change(function(){
		  var demande_info = $(".demande-info").val();
		  var type_produit = $(".type-produit").val();
                  // Verification selon la valeur des champs
		  if((demande_info == "3" || demande_info == "2") && (type_produit =="1322" || type_produit =="1461" || type_produit =="1458")){
		    $("#numberProduct").fadeIn();
		    $("#selectLetter").fadeIn();
		  }else{
		    $("#numberProduct").fadeOut();
		    $("#selectLetter").fadeOut();
 
		  }
		});

Je duplique donc mon ecoute sur les 2 champs mais avec les vérifications qui vont avec :/
Pas très optimisé donc.
Avez-vous une idée de comment mieux faire, je bloque un peu.

Merci à vous

Salut,

C'est dans la doc ici.
Code:

1 2 3 4 5 6 function handler1() { alert( "handler1 Ok" ); } $( "p" ).on( "click", handler1 );
et si tu veux passer des arguments dans la fonction
Code:

1 2 3 4 5 function myHandler( event ) { alert( event.data.foo ); } $( "p" ).on( "click", { foo: "bar" }, myHandler );
Remplaces "click" par "change" et ça fonctionnera pour ton cas. Tu peux aussi utiliser la version courte (sans passer par .on), c'est le même principe.

Parfait, c'est nickel !

Je ne connaissait pas.

Jte remercie