Help me: show or hide div blocks with a select option

Development
#1 
 Form code

					<div class="form-jls-cop1">
						<label for="type_user" class="label">Type de client:</label>
						<select name="type_user" required class="form-control jls-selec" id="type_user">
						  <option value="0">Choisir le type de clients</option>
						  <option value="Particulier">Particulier</option>
						  <option value="Entreprise">Entreprise</option>
						  <option value="ong">Organisation (ONG)</option> 
						
						</select>
						
				  </div>
                  <div class="group_type">
                    <div id="typepaticulier" class="type" >
                      <div class="form-jls-cop"  >
                        <label for="chargeur" class="label">Choix du client:</label>
                          <select name="liste_entreprise" required class="form-control jls-selec1" id="liste_entreprise"></select>
                       </div>
                        
                        
                      <div class="jls-btn" >
                          <button type="button" class="btn btn-info" data-toggle="modal" data-target="#AjoutEntrepise">Nouveau</button>
                       </div>
                    </div>
                  </div>
                  <div class="group_type">
                    <div id="typeentreprise" class="type" >
                      
                      ppppaeeeeeeeeeeeeeeeeeee
                      
                    </div>
                  </div>
                  <div class="group_type">
                  <div id="typeorganisation" class="type">
                 
                 	fgggggggggggffffffffff
                 	
                 </div>
                 </div>
				</div>

java code

$(document).ready(function () {
/au changement du champs instrument on met à jour l’affichage des champs/
$(document).on(“change”, “#type_user”, function () {
updateFields();
});
/initialisation du champs instrument, pour l’utilisation du plugin select2 avec un filtre de recherche particulier/
$(‘select#type_user’).select2({matcher: select2matchCustom});
/initialisation de 'laffichage des champs/
updateFields();

});

/On va utiliser le système de recherche classique du plugin select2/
var defaultMatcher = $.fn.select2.defaults.defaults.matcher;
function select2matchCustom(params, data) {
/* Si l’option est “Autre” on l’affiche toujours /
if (params.term && data.id == “Particulier”) {
return data;
}
/ Sinon utilisation de la recherche classique */
return defaultMatcher(params, data);
}

/la fonction de mise à jour de l’affichage des champs/
function updateFields() {
/* Si la valeur du champ instrument est “autre” on affiche les champs supplémentaire, sinon on les masque */
if ($("#type_user").val() === “Particulier”) {
$("#typepaticulier").parents(".group_type").css(“display”, “block”);
$("#typeentreprise").parents(".group_type").css(“display”, “none”);
$("#typeorganisation").parents(".group_type").css(“display”, “none”);

} else if ($("#type_user").val() === "Entreprise")  {
    $("#typepaticulier").parents(".group_type").css("display", "none");
    $("#typeentreprise").parents(".group_type").css("display", "block");
	$("#typeorganisation").parents(".group_type").css("display", "none");
}

else if ($("#type_user").val() === "ong")  {
    $("#typepaticulier").parents(".group_type").css("display", "none");
    $("#typeentreprise").parents(".group_type").css("display", "none");
	$("#typeorganisation").parents(".group_type").css("display", "block");
}

else {
    $("#typepaticulier").parents(".group_type").css("display", "none");
    $("#typeentreprise").parents(".group_type").css("display", "none");
	$("#typeorganisation").parents(".group_type").css("display", "none");
}

}

#2

I do not see any obvious reason why your code does not work. It is possible there is an error in your code. Have you confirmed that your updateFields() function is actually getting called when you choose an item in the Select2? You can use the JavaScript debugger in your browser to confirm that the method is being executed when you make a selection.

Assuming it is being called, then I recommend that you confirm that the code you’re using to select the parent <div>s and set their CSS display properties is correct.

If your updateFields() method is not being executed when you make a selection, then you need to debug that issue. The <select> element’s change event should be fired when you make a selection in the Select2 widget, and it should bubble up to the document element, where your event handler should receive it. So I would confirm that your document’s change event handler is actually being called. Again, you can use the JavaScript debugger in your browser to help you with this (for example, by setting a breakpoint in your event handler, or by including a console.log() statement as the first line in the event handler).

#3

Also: one reason you probably haven’t received a response sooner than now is that you chose the wrong category for this question. You should have posted it in the “How do I” category. I don’t know if you can change the category at this point, but since I’ve found it now, we can continue the discussion in this category.