Add several from an object in a with javascript The 2019 Stack Overflow Developer Survey Results Are InLength of a JavaScript objectWhat is the most efficient way to deep clone an object in JavaScript?What is the best way to add options to a select from as a JS object with jQuery?How do I remove a property from a JavaScript object?How do I check if an array includes an object in JavaScript?How do I test for an empty JavaScript object?How do I correctly clone a JavaScript object?Checking if a key exists in a JavaScript object?How do I UPDATE from a SELECT in SQL Server?How do I remove a particular element from an array in JavaScript?

What is the motivation for a law requiring 2 parties to consent for recording a conversation

Landlord wants to switch my lease to a "Land contract" to "get back at the city"

Pokemon Turn Based battle (Python)

Feature engineering suggestion required

Are spiders unable to hurt humans, especially very small spiders?

Protecting Dualbooting Windows from dangerous code (like rm -rf)

Shouldn't "much" here be used instead of "more"?

Why not take a picture of a closer black hole?

Why do some words that are not inflected have an umlaut?

Right tool to dig six foot holes?

Can you compress metal and what would be the consequences?

Can a rogue use sneak attack with weapons that have the thrown property even if they are not thrown?

Identify boardgame from Big movie

Who coined the term "madman theory"?

FPGA - DIY Programming

Deal with toxic manager when you can't quit

Is "plugging out" electronic devices an American expression?

Should I use my personal e-mail address, or my workplace one, when registering to external websites for work purposes?

What is the closest word meaning "respect for time / mindful"

slides for 30min~1hr skype tenure track application interview

How to save as into a customized destination on macOS?

Did Section 31 appear in Star Trek: The Next Generation?

Is bread bad for ducks?

Looking for Correct Greek Translation for Heraclitus

Add several from an object in a with javascript

The 2019 Stack Overflow Developer Survey Results Are InLength of a JavaScript objectWhat is the most efficient way to deep clone an object in JavaScript?What is the best way to add options to a select from as a JS object with jQuery?How do I remove a property from a JavaScript object?How do I check if an array includes an object in JavaScript?How do I test for an empty JavaScript object?How do I correctly clone a JavaScript object?Checking if a key exists in a JavaScript object?How do I UPDATE from a SELECT in SQL Server?How do I remove a particular element from an array in JavaScript?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

I'm trying to build a form with two select. Depending on the choice made in the first one, the list of possible choices in the second should be adapted.

So if select 1 choice value is 1 => Display object 1 as options in select 2.

I created this js code :

var EntiteGenerale = document.getElementById("TypeEntityId").value;
var select = document.getElementById("EntityId");
var index;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;




function DisplayEntiteL() 
 if (EntiteGenerale === 2) 
 for (index in Departement) 
 select.options[select.options.length] = new Option(Departement[index], index);
 
 else if (EntiteGenerale === 3) 
 for (index in CentreSecours) 
 select.options[select.options.length] = new Option(CentreSecours[index], index);
 
 else 
 console.log("rien à afficher");

But when I try it, the else statement "rien à afficher" is always displaying because my options aren't added.

Could you tell me please what's wrong with my code ?
See the full code in this JSFiddle.

Thank you in advance.

Best regards,

asked Mar 8 at 9:40

G. Delvigne

7019

you get the value when ther page loads, but not when the select value chnages. Move the var EntiteGenerale = document.getElementById("TypeEntityId").value; line inside DisplayEntiteL()

– DavidB
Mar 8 at 9:56

add a comment |

I'm trying to build a form with two select. Depending on the choice made in the first one, the list of possible choices in the second should be adapted.

So if select 1 choice value is 1 => Display object 1 as options in select 2.

I created this js code :

var EntiteGenerale = document.getElementById("TypeEntityId").value;
var select = document.getElementById("EntityId");
var index;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;




function DisplayEntiteL() 
 if (EntiteGenerale === 2) 
 for (index in Departement) 
 select.options[select.options.length] = new Option(Departement[index], index);
 
 else if (EntiteGenerale === 3) 
 for (index in CentreSecours) 
 select.options[select.options.length] = new Option(CentreSecours[index], index);
 
 else 
 console.log("rien à afficher");

But when I try it, the else statement "rien à afficher" is always displaying because my options aren't added.

Could you tell me please what's wrong with my code ?
See the full code in this JSFiddle.

Thank you in advance.

Best regards,

asked Mar 8 at 9:40

G. Delvigne

7019

you get the value when ther page loads, but not when the select value chnages. Move the var EntiteGenerale = document.getElementById("TypeEntityId").value; line inside DisplayEntiteL()

– DavidB
Mar 8 at 9:56

add a comment |

I'm trying to build a form with two select. Depending on the choice made in the first one, the list of possible choices in the second should be adapted.

So if select 1 choice value is 1 => Display object 1 as options in select 2.

I created this js code :

var EntiteGenerale = document.getElementById("TypeEntityId").value;
var select = document.getElementById("EntityId");
var index;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;




function DisplayEntiteL() 
 if (EntiteGenerale === 2) 
 for (index in Departement) 
 select.options[select.options.length] = new Option(Departement[index], index);
 
 else if (EntiteGenerale === 3) 
 for (index in CentreSecours) 
 select.options[select.options.length] = new Option(CentreSecours[index], index);
 
 else 
 console.log("rien à afficher");

But when I try it, the else statement "rien à afficher" is always displaying because my options aren't added.

Could you tell me please what's wrong with my code ?
See the full code in this JSFiddle.

Thank you in advance.

Best regards,

asked Mar 8 at 9:40

G. Delvigne

7019

I'm trying to build a form with two select. Depending on the choice made in the first one, the list of possible choices in the second should be adapted.

So if select 1 choice value is 1 => Display object 1 as options in select 2.

I created this js code :

var EntiteGenerale = document.getElementById("TypeEntityId").value;
var select = document.getElementById("EntityId");
var index;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;




function DisplayEntiteL() 
 if (EntiteGenerale === 2) 
 for (index in Departement) 
 select.options[select.options.length] = new Option(Departement[index], index);
 
 else if (EntiteGenerale === 3) 
 for (index in CentreSecours) 
 select.options[select.options.length] = new Option(CentreSecours[index], index);
 
 else 
 console.log("rien à afficher");

But when I try it, the else statement "rien à afficher" is always displaying because my options aren't added.

Could you tell me please what's wrong with my code ?
See the full code in this JSFiddle.

Thank you in advance.

Best regards,

javascript object select

asked Mar 8 at 9:40

G. Delvigne

7019

asked Mar 8 at 9:40

G. Delvigne

7019

asked Mar 8 at 9:40

G. Delvigne

7019

asked Mar 8 at 9:40

G. Delvigne

7019

asked Mar 8 at 9:40

G. Delvigne

7019

you get the value when ther page loads, but not when the select value chnages. Move the var EntiteGenerale = document.getElementById("TypeEntityId").value; line inside DisplayEntiteL()

– DavidB
Mar 8 at 9:56

add a comment |

you get the value when ther page loads, but not when the select value chnages. Move the var EntiteGenerale = document.getElementById("TypeEntityId").value; line inside DisplayEntiteL()

– DavidB
Mar 8 at 9:56

you get the value when ther page loads, but not when the select value chnages. Move the var EntiteGenerale = document.getElementById("TypeEntityId").value; line inside DisplayEntiteL()

– DavidB
Mar 8 at 9:56

add a comment |

3 Answers
3

active

oldest

votes

If I understand your question correctly, you want the <option> eleemnts of the EntityId select to dynamically change based on the value of the TypeEntityId select element. Consider revising your code so that the change event is added to the TypeEntityId select via the addEventListener():

/* Bind change event via addEventListener() */
document.getElementById("TypeEntityId").addEventListener('change', DisplayEntiteL)

Also, you revise your if lines so that the values in the comparisons are strings, to ensure that the value match conditions can be satisfied:

/* Add event parameter to localize value extraction from corresponding
select element */
function DisplayEntiteL(event) 

 /* Get current value of TypeEntityId select */
 const value = event.currentTarget.value
 const entityId = document.getElementById("EntityId");

 /* Empty any previous options from EntityId select */
 while (entityId.hasChildNodes()) 
 entityId.removeChild(entityId.lastChild);
 

 /* If value of TypeEntityId is 2 then show Departement items in
 entityId select */
 if (value === '2') 
 for (index in Departement) 
 entityId.appendChild(new Option(Departement[index], index));
 

 
 /* If value of TypeEntityId is 3 then show CentreSecours items in
 entityId select */
 else if (value === '3') 

 for (index in CentreSecours) 
 entityId.appendChild(new Option(CentreSecours[index], index));
 
 
 /* Otherwise log to console */
 else 
 /* entityId.appendChild(new Option('No options')); */
 console.log("rien à afficher");

Also, the code above introduces the event parameter, allowing you to access the value of the TypeEntityId select within the event handler. For a full working sample see this JSFiddle, or the snippet below:

var EntiteGenerale = document.getElementById("TypeEntityId").value;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;

/* Add event parameter to localise value extraction from corresponding
select element */
function DisplayEntiteL(event) 
	
 /* Get current value of TypeEntityId select */
 const value = event.currentTarget.value
 const entityId = document.getElementById("EntityId");

 /* Empty any previous options from EntityId select */
 while (entityId.hasChildNodes()) 
 entityId.removeChild(entityId.lastChild);
 

	/* If value of TypeEntityId is 2 then show Departement items in
 entityId select */
 if (value === '2') 
 for (index in Departement) 
 entityId.appendChild(new Option(Departement[index], index));
 

 
	/* If value of TypeEntityId is 3 then show CentreSecours items in
 entityId select */
 else if (value === '3') 

 for (index in CentreSecours) 
 entityId.appendChild(new Option(CentreSecours[index], index));
 
 
 /* Otherwise log to console */
 else 
 	/* entityId.appendChild(new Option('No options')); */
 console.log("rien à afficher");
 


/* Bind change event via addEventListener() */
document.getElementById("TypeEntityId").addEventListener('change', DisplayEntiteL)

 input[type='checkbox'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 

 input[type='radio'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 

 input[type='radio']:checked 
 background-color: red;
 

 input[type='checkbox']:checked 
 background-color: red;
 

 input::placeholder 
 font-size: 0.7rem;
 

 select 
 border-radius: 20px;
 font-size: 0.8rem;
 

 select:focus 
 border-color: #ff2400;
 outline: 0;
 box-shadow: none;

<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité générale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
 id="TypeEntityId" name="TypeEntityId">
 <option value="">Sélectionnez une entité générale</option>
 <option value="2">Départements &amp; Services centraux</option>
 <option value="3">Centre de secours</option>
 <option value="4">Section locale (Bruxelles) </option>
 <option value="5">Comité Provincial</option>
 <option value="6">Relais</option>
 <option value="7">SISU</option>
 <option value="8">Centre ADA</option>
 <option value="9">Maison Croix-Rouge</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="TypeEntityId" data-valmsg-replace="true"></span>
 </div>

</div>
<br>
<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité locale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field EntityId must be a number." data-val-range="The field EntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner une ENTITE"
 id="EntityId" name="EntityId"><option value="">Sélectionnez une entité locale</option>
</select>
 <span class="field-validation-valid text-danger" data-valmsg-for="EntityId" data-valmsg-replace="true"></span>
 </div>

</div>

answered Mar 8 at 10:12

Dacre Denny

14.6k41233

add a comment |

You are store the selected value before to the change function.so each time is a same value.

So call inside the change function.

And also selected value return with string .you should convert to int .Otherwise === is return false.Because === validate the datatype also

var EntiteGenerale = document.getElementById("TypeEntityId");
var select = document.getElementById("EntityId");
var index;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;




function DisplayEntiteL() 
 EntiteGenerale = parseFloat(EntiteGenerale.value);
 if (EntiteGenerale === 2) 
 for (index in Departement) 
 select.options[select.options.length] = new Option(Departement[index], index);
 
 else if (EntiteGenerale === 3) 
 for (index in CentreSecours) 
 select.options[select.options.length] = new Option(CentreSecours[index], index);
 
 else 
 console.log("rien à afficher");

input[type='checkbox'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;


input[type='radio'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;


input[type='radio']:checked 
 background-color: red;


input[type='checkbox']:checked 
 background-color: red;


input::placeholder 
 font-size: 0.7rem;


select 
 border-radius: 20px;
 font-size: 0.8rem;


select:focus 
 border-color: #ff2400;
 outline: 0;
 box-shadow: none;

<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité générale :&nbsp;&nbsp;
 <select onchange="DisplayEntiteL()" data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
 id="TypeEntityId" name="TypeEntityId">
 <option value="">Sélectionnez une entité générale</option>
 <option value="2">Départements &amp; Services centraux</option>
 <option value="3">Centre de secours</option>
 <option value="4">Section locale (Bruxelles) </option>
 <option value="5">Comité Provincial</option>
 <option value="6">Relais</option>
 <option value="7">SISU</option>
 <option value="8">Centre ADA</option>
 <option value="9">Maison Croix-Rouge</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="TypeEntityId" data-valmsg-replace="true"></span>
 </div>

</div>
<br>
<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité locale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field EntityId must be a number." data-val-range="The field EntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner une ENTITE"
 id="EntityId" name="EntityId">
 <option value="">Sélectionnez une entité locale</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="EntityId" data-valmsg-replace="true"></span>
 </div>

</div>

For why parseFloat

enter image description here

edited Mar 8 at 10:13

answered Mar 8 at 10:03

prasanth

14.6k21437

Why parseFloat(EntiteGenerale.value) and not parseInt(EntiteGenerale.value)? Or even +EntiteGenerale.value?

– iArcadia
Mar 8 at 10:06

1

@iArcadia. Because parseFloat is better approach for number.The will convert to number both normal and decimal value see this image in my updated answer

– prasanth
Mar 8 at 10:13

Thanks for your explanation.

– iArcadia
Mar 8 at 10:16

add a comment |

Thank you so much @prasanth!

After a few more researches, I tried this who works perfectly.
I added a function to clear the select before displaying new object inside.

 <select onchange="DisplayEntiteL(event)"></select>

 var EntiteGenerale = document.getElementById("TypeEntityId");
 var select = document.getElementById("EntityId");
 var index;

 var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
 ;

 var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
 ;


 function clearOption()
 var x = document.getElementById("EntityId");
 while (x.length != 0) 
 x.remove(x.length-1);
 
 

 function DisplayEntiteL(event) 
 if (event.target.value === '1') 
 clearOption();
 for (index in Departement) 
 select.options[select.options.length] = new Option(Departement[index], index);
 
 else if (event.target.value === '2') 
 clearOption();
 for (index in CentreSecours) 
 select.options[select.options.length] = new Option(CentreSecours[index], index);
 
 else 
 console.log("rien à afficher");

answered Mar 8 at 11:36

G. Delvigne

7019

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55060450%2fadd-several-option-from-an-object-in-a-select-with-javascript%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

/* Bind change event via addEventListener() */
document.getElementById("TypeEntityId").addEventListener('change', DisplayEntiteL)

Also, you revise your if lines so that the values in the comparisons are strings, to ensure that the value match conditions can be satisfied:

/* Add event parameter to localize value extraction from corresponding
select element */
function DisplayEntiteL(event) 

 /* Get current value of TypeEntityId select */
 const value = event.currentTarget.value
 const entityId = document.getElementById("EntityId");

 /* Empty any previous options from EntityId select */
 while (entityId.hasChildNodes()) 
 entityId.removeChild(entityId.lastChild);
 

 /* If value of TypeEntityId is 2 then show Departement items in
 entityId select */
 if (value === '2') 
 for (index in Departement) 
 entityId.appendChild(new Option(Departement[index], index));
 

 
 /* If value of TypeEntityId is 3 then show CentreSecours items in
 entityId select */
 else if (value === '3') 

 for (index in CentreSecours) 
 entityId.appendChild(new Option(CentreSecours[index], index));
 
 
 /* Otherwise log to console */
 else 
 /* entityId.appendChild(new Option('No options')); */
 console.log("rien à afficher");

var EntiteGenerale = document.getElementById("TypeEntityId").value;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;

/* Add event parameter to localise value extraction from corresponding
select element */
function DisplayEntiteL(event) 
	
 /* Get current value of TypeEntityId select */
 const value = event.currentTarget.value
 const entityId = document.getElementById("EntityId");

 /* Empty any previous options from EntityId select */
 while (entityId.hasChildNodes()) 
 entityId.removeChild(entityId.lastChild);
 

	/* If value of TypeEntityId is 2 then show Departement items in
 entityId select */
 if (value === '2') 
 for (index in Departement) 
 entityId.appendChild(new Option(Departement[index], index));
 

 
	/* If value of TypeEntityId is 3 then show CentreSecours items in
 entityId select */
 else if (value === '3') 

 for (index in CentreSecours) 
 entityId.appendChild(new Option(CentreSecours[index], index));
 
 
 /* Otherwise log to console */
 else 
 	/* entityId.appendChild(new Option('No options')); */
 console.log("rien à afficher");
 


/* Bind change event via addEventListener() */
document.getElementById("TypeEntityId").addEventListener('change', DisplayEntiteL)

 input[type='checkbox'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 

 input[type='radio'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 

 input[type='radio']:checked 
 background-color: red;
 

 input[type='checkbox']:checked 
 background-color: red;
 

 input::placeholder 
 font-size: 0.7rem;
 

 select 
 border-radius: 20px;
 font-size: 0.8rem;
 

 select:focus 
 border-color: #ff2400;
 outline: 0;
 box-shadow: none;

<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité générale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
 id="TypeEntityId" name="TypeEntityId">
 <option value="">Sélectionnez une entité générale</option>
 <option value="2">Départements &amp; Services centraux</option>
 <option value="3">Centre de secours</option>
 <option value="4">Section locale (Bruxelles) </option>
 <option value="5">Comité Provincial</option>
 <option value="6">Relais</option>
 <option value="7">SISU</option>
 <option value="8">Centre ADA</option>
 <option value="9">Maison Croix-Rouge</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="TypeEntityId" data-valmsg-replace="true"></span>
 </div>

</div>
<br>
<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité locale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field EntityId must be a number." data-val-range="The field EntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner une ENTITE"
 id="EntityId" name="EntityId"><option value="">Sélectionnez une entité locale</option>
</select>
 <span class="field-validation-valid text-danger" data-valmsg-for="EntityId" data-valmsg-replace="true"></span>
 </div>

</div>

answered Mar 8 at 10:12

Dacre Denny

14.6k41233

add a comment |

/* Bind change event via addEventListener() */
document.getElementById("TypeEntityId").addEventListener('change', DisplayEntiteL)

Also, you revise your if lines so that the values in the comparisons are strings, to ensure that the value match conditions can be satisfied:

/* Add event parameter to localize value extraction from corresponding
select element */
function DisplayEntiteL(event) 

 /* Get current value of TypeEntityId select */
 const value = event.currentTarget.value
 const entityId = document.getElementById("EntityId");

 /* Empty any previous options from EntityId select */
 while (entityId.hasChildNodes()) 
 entityId.removeChild(entityId.lastChild);
 

 /* If value of TypeEntityId is 2 then show Departement items in
 entityId select */
 if (value === '2') 
 for (index in Departement) 
 entityId.appendChild(new Option(Departement[index], index));
 

 
 /* If value of TypeEntityId is 3 then show CentreSecours items in
 entityId select */
 else if (value === '3') 

 for (index in CentreSecours) 
 entityId.appendChild(new Option(CentreSecours[index], index));
 
 
 /* Otherwise log to console */
 else 
 /* entityId.appendChild(new Option('No options')); */
 console.log("rien à afficher");

var EntiteGenerale = document.getElementById("TypeEntityId").value;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;

/* Add event parameter to localise value extraction from corresponding
select element */
function DisplayEntiteL(event) 
	
 /* Get current value of TypeEntityId select */
 const value = event.currentTarget.value
 const entityId = document.getElementById("EntityId");

 /* Empty any previous options from EntityId select */
 while (entityId.hasChildNodes()) 
 entityId.removeChild(entityId.lastChild);
 

	/* If value of TypeEntityId is 2 then show Departement items in
 entityId select */
 if (value === '2') 
 for (index in Departement) 
 entityId.appendChild(new Option(Departement[index], index));
 

 
	/* If value of TypeEntityId is 3 then show CentreSecours items in
 entityId select */
 else if (value === '3') 

 for (index in CentreSecours) 
 entityId.appendChild(new Option(CentreSecours[index], index));
 
 
 /* Otherwise log to console */
 else 
 	/* entityId.appendChild(new Option('No options')); */
 console.log("rien à afficher");
 


/* Bind change event via addEventListener() */
document.getElementById("TypeEntityId").addEventListener('change', DisplayEntiteL)

 input[type='checkbox'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 

 input[type='radio'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 

 input[type='radio']:checked 
 background-color: red;
 

 input[type='checkbox']:checked 
 background-color: red;
 

 input::placeholder 
 font-size: 0.7rem;
 

 select 
 border-radius: 20px;
 font-size: 0.8rem;
 

 select:focus 
 border-color: #ff2400;
 outline: 0;
 box-shadow: none;

<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité générale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
 id="TypeEntityId" name="TypeEntityId">
 <option value="">Sélectionnez une entité générale</option>
 <option value="2">Départements &amp; Services centraux</option>
 <option value="3">Centre de secours</option>
 <option value="4">Section locale (Bruxelles) </option>
 <option value="5">Comité Provincial</option>
 <option value="6">Relais</option>
 <option value="7">SISU</option>
 <option value="8">Centre ADA</option>
 <option value="9">Maison Croix-Rouge</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="TypeEntityId" data-valmsg-replace="true"></span>
 </div>

</div>
<br>
<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité locale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field EntityId must be a number." data-val-range="The field EntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner une ENTITE"
 id="EntityId" name="EntityId"><option value="">Sélectionnez une entité locale</option>
</select>
 <span class="field-validation-valid text-danger" data-valmsg-for="EntityId" data-valmsg-replace="true"></span>
 </div>

</div>

answered Mar 8 at 10:12

Dacre Denny

14.6k41233

add a comment |

/* Bind change event via addEventListener() */
document.getElementById("TypeEntityId").addEventListener('change', DisplayEntiteL)

Also, you revise your if lines so that the values in the comparisons are strings, to ensure that the value match conditions can be satisfied:

/* Add event parameter to localize value extraction from corresponding
select element */
function DisplayEntiteL(event) 

 /* Get current value of TypeEntityId select */
 const value = event.currentTarget.value
 const entityId = document.getElementById("EntityId");

 /* Empty any previous options from EntityId select */
 while (entityId.hasChildNodes()) 
 entityId.removeChild(entityId.lastChild);
 

 /* If value of TypeEntityId is 2 then show Departement items in
 entityId select */
 if (value === '2') 
 for (index in Departement) 
 entityId.appendChild(new Option(Departement[index], index));
 

 
 /* If value of TypeEntityId is 3 then show CentreSecours items in
 entityId select */
 else if (value === '3') 

 for (index in CentreSecours) 
 entityId.appendChild(new Option(CentreSecours[index], index));
 
 
 /* Otherwise log to console */
 else 
 /* entityId.appendChild(new Option('No options')); */
 console.log("rien à afficher");

var EntiteGenerale = document.getElementById("TypeEntityId").value;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;

/* Add event parameter to localise value extraction from corresponding
select element */
function DisplayEntiteL(event) 
	
 /* Get current value of TypeEntityId select */
 const value = event.currentTarget.value
 const entityId = document.getElementById("EntityId");

 /* Empty any previous options from EntityId select */
 while (entityId.hasChildNodes()) 
 entityId.removeChild(entityId.lastChild);
 

	/* If value of TypeEntityId is 2 then show Departement items in
 entityId select */
 if (value === '2') 
 for (index in Departement) 
 entityId.appendChild(new Option(Departement[index], index));
 

 
	/* If value of TypeEntityId is 3 then show CentreSecours items in
 entityId select */
 else if (value === '3') 

 for (index in CentreSecours) 
 entityId.appendChild(new Option(CentreSecours[index], index));
 
 
 /* Otherwise log to console */
 else 
 	/* entityId.appendChild(new Option('No options')); */
 console.log("rien à afficher");
 


/* Bind change event via addEventListener() */
document.getElementById("TypeEntityId").addEventListener('change', DisplayEntiteL)

 input[type='checkbox'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 

 input[type='radio'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 

 input[type='radio']:checked 
 background-color: red;
 

 input[type='checkbox']:checked 
 background-color: red;
 

 input::placeholder 
 font-size: 0.7rem;
 

 select 
 border-radius: 20px;
 font-size: 0.8rem;
 

 select:focus 
 border-color: #ff2400;
 outline: 0;
 box-shadow: none;

<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité générale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
 id="TypeEntityId" name="TypeEntityId">
 <option value="">Sélectionnez une entité générale</option>
 <option value="2">Départements &amp; Services centraux</option>
 <option value="3">Centre de secours</option>
 <option value="4">Section locale (Bruxelles) </option>
 <option value="5">Comité Provincial</option>
 <option value="6">Relais</option>
 <option value="7">SISU</option>
 <option value="8">Centre ADA</option>
 <option value="9">Maison Croix-Rouge</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="TypeEntityId" data-valmsg-replace="true"></span>
 </div>

</div>
<br>
<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité locale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field EntityId must be a number." data-val-range="The field EntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner une ENTITE"
 id="EntityId" name="EntityId"><option value="">Sélectionnez une entité locale</option>
</select>
 <span class="field-validation-valid text-danger" data-valmsg-for="EntityId" data-valmsg-replace="true"></span>
 </div>

</div>

answered Mar 8 at 10:12

Dacre Denny

14.6k41233

/* Bind change event via addEventListener() */
document.getElementById("TypeEntityId").addEventListener('change', DisplayEntiteL)

Also, you revise your if lines so that the values in the comparisons are strings, to ensure that the value match conditions can be satisfied:

/* Add event parameter to localize value extraction from corresponding
select element */
function DisplayEntiteL(event) 

 /* Get current value of TypeEntityId select */
 const value = event.currentTarget.value
 const entityId = document.getElementById("EntityId");

 /* Empty any previous options from EntityId select */
 while (entityId.hasChildNodes()) 
 entityId.removeChild(entityId.lastChild);
 

 /* If value of TypeEntityId is 2 then show Departement items in
 entityId select */
 if (value === '2') 
 for (index in Departement) 
 entityId.appendChild(new Option(Departement[index], index));
 

 
 /* If value of TypeEntityId is 3 then show CentreSecours items in
 entityId select */
 else if (value === '3') 

 for (index in CentreSecours) 
 entityId.appendChild(new Option(CentreSecours[index], index));
 
 
 /* Otherwise log to console */
 else 
 /* entityId.appendChild(new Option('No options')); */
 console.log("rien à afficher");

var EntiteGenerale = document.getElementById("TypeEntityId").value;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;

/* Add event parameter to localise value extraction from corresponding
select element */
function DisplayEntiteL(event) 
	
 /* Get current value of TypeEntityId select */
 const value = event.currentTarget.value
 const entityId = document.getElementById("EntityId");

 /* Empty any previous options from EntityId select */
 while (entityId.hasChildNodes()) 
 entityId.removeChild(entityId.lastChild);
 

	/* If value of TypeEntityId is 2 then show Departement items in
 entityId select */
 if (value === '2') 
 for (index in Departement) 
 entityId.appendChild(new Option(Departement[index], index));
 

 
	/* If value of TypeEntityId is 3 then show CentreSecours items in
 entityId select */
 else if (value === '3') 

 for (index in CentreSecours) 
 entityId.appendChild(new Option(CentreSecours[index], index));
 
 
 /* Otherwise log to console */
 else 
 	/* entityId.appendChild(new Option('No options')); */
 console.log("rien à afficher");
 


/* Bind change event via addEventListener() */
document.getElementById("TypeEntityId").addEventListener('change', DisplayEntiteL)

 input[type='checkbox'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 

 input[type='radio'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 

 input[type='radio']:checked 
 background-color: red;
 

 input[type='checkbox']:checked 
 background-color: red;
 

 input::placeholder 
 font-size: 0.7rem;
 

 select 
 border-radius: 20px;
 font-size: 0.8rem;
 

 select:focus 
 border-color: #ff2400;
 outline: 0;
 box-shadow: none;

<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité générale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
 id="TypeEntityId" name="TypeEntityId">
 <option value="">Sélectionnez une entité générale</option>
 <option value="2">Départements &amp; Services centraux</option>
 <option value="3">Centre de secours</option>
 <option value="4">Section locale (Bruxelles) </option>
 <option value="5">Comité Provincial</option>
 <option value="6">Relais</option>
 <option value="7">SISU</option>
 <option value="8">Centre ADA</option>
 <option value="9">Maison Croix-Rouge</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="TypeEntityId" data-valmsg-replace="true"></span>
 </div>

</div>
<br>
<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité locale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field EntityId must be a number." data-val-range="The field EntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner une ENTITE"
 id="EntityId" name="EntityId"><option value="">Sélectionnez une entité locale</option>
</select>
 <span class="field-validation-valid text-danger" data-valmsg-for="EntityId" data-valmsg-replace="true"></span>
 </div>

</div>

var EntiteGenerale = document.getElementById("TypeEntityId").value;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;

/* Add event parameter to localise value extraction from corresponding
select element */
function DisplayEntiteL(event) 
	
 /* Get current value of TypeEntityId select */
 const value = event.currentTarget.value
 const entityId = document.getElementById("EntityId");

 /* Empty any previous options from EntityId select */
 while (entityId.hasChildNodes()) 
 entityId.removeChild(entityId.lastChild);
 

	/* If value of TypeEntityId is 2 then show Departement items in
 entityId select */
 if (value === '2') 
 for (index in Departement) 
 entityId.appendChild(new Option(Departement[index], index));
 

 
	/* If value of TypeEntityId is 3 then show CentreSecours items in
 entityId select */
 else if (value === '3') 

 for (index in CentreSecours) 
 entityId.appendChild(new Option(CentreSecours[index], index));
 
 
 /* Otherwise log to console */
 else 
 	/* entityId.appendChild(new Option('No options')); */
 console.log("rien à afficher");
 


/* Bind change event via addEventListener() */
document.getElementById("TypeEntityId").addEventListener('change', DisplayEntiteL)

 input[type='checkbox'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 

 input[type='radio'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 

 input[type='radio']:checked 
 background-color: red;
 

 input[type='checkbox']:checked 
 background-color: red;
 

 input::placeholder 
 font-size: 0.7rem;
 

 select 
 border-radius: 20px;
 font-size: 0.8rem;
 

 select:focus 
 border-color: #ff2400;
 outline: 0;
 box-shadow: none;

<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité générale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
 id="TypeEntityId" name="TypeEntityId">
 <option value="">Sélectionnez une entité générale</option>
 <option value="2">Départements &amp; Services centraux</option>
 <option value="3">Centre de secours</option>
 <option value="4">Section locale (Bruxelles) </option>
 <option value="5">Comité Provincial</option>
 <option value="6">Relais</option>
 <option value="7">SISU</option>
 <option value="8">Centre ADA</option>
 <option value="9">Maison Croix-Rouge</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="TypeEntityId" data-valmsg-replace="true"></span>
 </div>

</div>
<br>
<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité locale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field EntityId must be a number." data-val-range="The field EntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner une ENTITE"
 id="EntityId" name="EntityId"><option value="">Sélectionnez une entité locale</option>
</select>
 <span class="field-validation-valid text-danger" data-valmsg-for="EntityId" data-valmsg-replace="true"></span>
 </div>

</div>

var EntiteGenerale = document.getElementById("TypeEntityId").value;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;

/* Add event parameter to localise value extraction from corresponding
select element */
function DisplayEntiteL(event) 
	
 /* Get current value of TypeEntityId select */
 const value = event.currentTarget.value
 const entityId = document.getElementById("EntityId");

 /* Empty any previous options from EntityId select */
 while (entityId.hasChildNodes()) 
 entityId.removeChild(entityId.lastChild);
 

	/* If value of TypeEntityId is 2 then show Departement items in
 entityId select */
 if (value === '2') 
 for (index in Departement) 
 entityId.appendChild(new Option(Departement[index], index));
 

 
	/* If value of TypeEntityId is 3 then show CentreSecours items in
 entityId select */
 else if (value === '3') 

 for (index in CentreSecours) 
 entityId.appendChild(new Option(CentreSecours[index], index));
 
 
 /* Otherwise log to console */
 else 
 	/* entityId.appendChild(new Option('No options')); */
 console.log("rien à afficher");
 


/* Bind change event via addEventListener() */
document.getElementById("TypeEntityId").addEventListener('change', DisplayEntiteL)

 input[type='checkbox'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 

 input[type='radio'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 

 input[type='radio']:checked 
 background-color: red;
 

 input[type='checkbox']:checked 
 background-color: red;
 

 input::placeholder 
 font-size: 0.7rem;
 

 select 
 border-radius: 20px;
 font-size: 0.8rem;
 

 select:focus 
 border-color: #ff2400;
 outline: 0;
 box-shadow: none;

<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité générale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
 id="TypeEntityId" name="TypeEntityId">
 <option value="">Sélectionnez une entité générale</option>
 <option value="2">Départements &amp; Services centraux</option>
 <option value="3">Centre de secours</option>
 <option value="4">Section locale (Bruxelles) </option>
 <option value="5">Comité Provincial</option>
 <option value="6">Relais</option>
 <option value="7">SISU</option>
 <option value="8">Centre ADA</option>
 <option value="9">Maison Croix-Rouge</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="TypeEntityId" data-valmsg-replace="true"></span>
 </div>

</div>
<br>
<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité locale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field EntityId must be a number." data-val-range="The field EntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner une ENTITE"
 id="EntityId" name="EntityId"><option value="">Sélectionnez une entité locale</option>
</select>
 <span class="field-validation-valid text-danger" data-valmsg-for="EntityId" data-valmsg-replace="true"></span>
 </div>

</div>

answered Mar 8 at 10:12

Dacre Denny

14.6k41233

answered Mar 8 at 10:12

Dacre Denny

14.6k41233

answered Mar 8 at 10:12

Dacre Denny

14.6k41233

answered Mar 8 at 10:12

Dacre Denny

14.6k41233

add a comment |

You are store the selected value before to the change function.so each time is a same value.

So call inside the change function.

And also selected value return with string .you should convert to int .Otherwise === is return false.Because === validate the datatype also

var EntiteGenerale = document.getElementById("TypeEntityId");
var select = document.getElementById("EntityId");
var index;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;




function DisplayEntiteL() 
 EntiteGenerale = parseFloat(EntiteGenerale.value);
 if (EntiteGenerale === 2) 
 for (index in Departement) 
 select.options[select.options.length] = new Option(Departement[index], index);
 
 else if (EntiteGenerale === 3) 
 for (index in CentreSecours) 
 select.options[select.options.length] = new Option(CentreSecours[index], index);
 
 else 
 console.log("rien à afficher");

input[type='checkbox'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;


input[type='radio'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;


input[type='radio']:checked 
 background-color: red;


input[type='checkbox']:checked 
 background-color: red;


input::placeholder 
 font-size: 0.7rem;


select 
 border-radius: 20px;
 font-size: 0.8rem;


select:focus 
 border-color: #ff2400;
 outline: 0;
 box-shadow: none;

<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité générale :&nbsp;&nbsp;
 <select onchange="DisplayEntiteL()" data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
 id="TypeEntityId" name="TypeEntityId">
 <option value="">Sélectionnez une entité générale</option>
 <option value="2">Départements &amp; Services centraux</option>
 <option value="3">Centre de secours</option>
 <option value="4">Section locale (Bruxelles) </option>
 <option value="5">Comité Provincial</option>
 <option value="6">Relais</option>
 <option value="7">SISU</option>
 <option value="8">Centre ADA</option>
 <option value="9">Maison Croix-Rouge</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="TypeEntityId" data-valmsg-replace="true"></span>
 </div>

</div>
<br>
<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité locale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field EntityId must be a number." data-val-range="The field EntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner une ENTITE"
 id="EntityId" name="EntityId">
 <option value="">Sélectionnez une entité locale</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="EntityId" data-valmsg-replace="true"></span>
 </div>

</div>

For why parseFloat

enter image description here

edited Mar 8 at 10:13

answered Mar 8 at 10:03

prasanth

14.6k21437

Why parseFloat(EntiteGenerale.value) and not parseInt(EntiteGenerale.value)? Or even +EntiteGenerale.value?

– iArcadia
Mar 8 at 10:06

1

@iArcadia. Because parseFloat is better approach for number.The will convert to number both normal and decimal value see this image in my updated answer

– prasanth
Mar 8 at 10:13

Thanks for your explanation.

– iArcadia
Mar 8 at 10:16

add a comment |

You are store the selected value before to the change function.so each time is a same value.

So call inside the change function.

And also selected value return with string .you should convert to int .Otherwise === is return false.Because === validate the datatype also

var EntiteGenerale = document.getElementById("TypeEntityId");
var select = document.getElementById("EntityId");
var index;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;




function DisplayEntiteL() 
 EntiteGenerale = parseFloat(EntiteGenerale.value);
 if (EntiteGenerale === 2) 
 for (index in Departement) 
 select.options[select.options.length] = new Option(Departement[index], index);
 
 else if (EntiteGenerale === 3) 
 for (index in CentreSecours) 
 select.options[select.options.length] = new Option(CentreSecours[index], index);
 
 else 
 console.log("rien à afficher");

input[type='checkbox'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;


input[type='radio'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;


input[type='radio']:checked 
 background-color: red;


input[type='checkbox']:checked 
 background-color: red;


input::placeholder 
 font-size: 0.7rem;


select 
 border-radius: 20px;
 font-size: 0.8rem;


select:focus 
 border-color: #ff2400;
 outline: 0;
 box-shadow: none;

<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité générale :&nbsp;&nbsp;
 <select onchange="DisplayEntiteL()" data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
 id="TypeEntityId" name="TypeEntityId">
 <option value="">Sélectionnez une entité générale</option>
 <option value="2">Départements &amp; Services centraux</option>
 <option value="3">Centre de secours</option>
 <option value="4">Section locale (Bruxelles) </option>
 <option value="5">Comité Provincial</option>
 <option value="6">Relais</option>
 <option value="7">SISU</option>
 <option value="8">Centre ADA</option>
 <option value="9">Maison Croix-Rouge</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="TypeEntityId" data-valmsg-replace="true"></span>
 </div>

</div>
<br>
<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité locale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field EntityId must be a number." data-val-range="The field EntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner une ENTITE"
 id="EntityId" name="EntityId">
 <option value="">Sélectionnez une entité locale</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="EntityId" data-valmsg-replace="true"></span>
 </div>

</div>

For why parseFloat

enter image description here

edited Mar 8 at 10:13

answered Mar 8 at 10:03

prasanth

14.6k21437

Why parseFloat(EntiteGenerale.value) and not parseInt(EntiteGenerale.value)? Or even +EntiteGenerale.value?

– iArcadia
Mar 8 at 10:06

1

@iArcadia. Because parseFloat is better approach for number.The will convert to number both normal and decimal value see this image in my updated answer

– prasanth
Mar 8 at 10:13

Thanks for your explanation.

– iArcadia
Mar 8 at 10:16

add a comment |

You are store the selected value before to the change function.so each time is a same value.

So call inside the change function.

And also selected value return with string .you should convert to int .Otherwise === is return false.Because === validate the datatype also

var EntiteGenerale = document.getElementById("TypeEntityId");
var select = document.getElementById("EntityId");
var index;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;




function DisplayEntiteL() 
 EntiteGenerale = parseFloat(EntiteGenerale.value);
 if (EntiteGenerale === 2) 
 for (index in Departement) 
 select.options[select.options.length] = new Option(Departement[index], index);
 
 else if (EntiteGenerale === 3) 
 for (index in CentreSecours) 
 select.options[select.options.length] = new Option(CentreSecours[index], index);
 
 else 
 console.log("rien à afficher");

input[type='checkbox'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;


input[type='radio'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;


input[type='radio']:checked 
 background-color: red;


input[type='checkbox']:checked 
 background-color: red;


input::placeholder 
 font-size: 0.7rem;


select 
 border-radius: 20px;
 font-size: 0.8rem;


select:focus 
 border-color: #ff2400;
 outline: 0;
 box-shadow: none;

<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité générale :&nbsp;&nbsp;
 <select onchange="DisplayEntiteL()" data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
 id="TypeEntityId" name="TypeEntityId">
 <option value="">Sélectionnez une entité générale</option>
 <option value="2">Départements &amp; Services centraux</option>
 <option value="3">Centre de secours</option>
 <option value="4">Section locale (Bruxelles) </option>
 <option value="5">Comité Provincial</option>
 <option value="6">Relais</option>
 <option value="7">SISU</option>
 <option value="8">Centre ADA</option>
 <option value="9">Maison Croix-Rouge</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="TypeEntityId" data-valmsg-replace="true"></span>
 </div>

</div>
<br>
<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité locale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field EntityId must be a number." data-val-range="The field EntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner une ENTITE"
 id="EntityId" name="EntityId">
 <option value="">Sélectionnez une entité locale</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="EntityId" data-valmsg-replace="true"></span>
 </div>

</div>

For why parseFloat

enter image description here

edited Mar 8 at 10:13

answered Mar 8 at 10:03

prasanth

14.6k21437

You are store the selected value before to the change function.so each time is a same value.

So call inside the change function.

And also selected value return with string .you should convert to int .Otherwise === is return false.Because === validate the datatype also

var EntiteGenerale = document.getElementById("TypeEntityId");
var select = document.getElementById("EntityId");
var index;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;




function DisplayEntiteL() 
 EntiteGenerale = parseFloat(EntiteGenerale.value);
 if (EntiteGenerale === 2) 
 for (index in Departement) 
 select.options[select.options.length] = new Option(Departement[index], index);
 
 else if (EntiteGenerale === 3) 
 for (index in CentreSecours) 
 select.options[select.options.length] = new Option(CentreSecours[index], index);
 
 else 
 console.log("rien à afficher");

input[type='checkbox'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;


input[type='radio'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;


input[type='radio']:checked 
 background-color: red;


input[type='checkbox']:checked 
 background-color: red;


input::placeholder 
 font-size: 0.7rem;


select 
 border-radius: 20px;
 font-size: 0.8rem;


select:focus 
 border-color: #ff2400;
 outline: 0;
 box-shadow: none;

<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité générale :&nbsp;&nbsp;
 <select onchange="DisplayEntiteL()" data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
 id="TypeEntityId" name="TypeEntityId">
 <option value="">Sélectionnez une entité générale</option>
 <option value="2">Départements &amp; Services centraux</option>
 <option value="3">Centre de secours</option>
 <option value="4">Section locale (Bruxelles) </option>
 <option value="5">Comité Provincial</option>
 <option value="6">Relais</option>
 <option value="7">SISU</option>
 <option value="8">Centre ADA</option>
 <option value="9">Maison Croix-Rouge</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="TypeEntityId" data-valmsg-replace="true"></span>
 </div>

</div>
<br>
<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité locale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field EntityId must be a number." data-val-range="The field EntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner une ENTITE"
 id="EntityId" name="EntityId">
 <option value="">Sélectionnez une entité locale</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="EntityId" data-valmsg-replace="true"></span>
 </div>

</div>

For why parseFloat

enter image description here

var EntiteGenerale = document.getElementById("TypeEntityId");
var select = document.getElementById("EntityId");
var index;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;




function DisplayEntiteL() 
 EntiteGenerale = parseFloat(EntiteGenerale.value);
 if (EntiteGenerale === 2) 
 for (index in Departement) 
 select.options[select.options.length] = new Option(Departement[index], index);
 
 else if (EntiteGenerale === 3) 
 for (index in CentreSecours) 
 select.options[select.options.length] = new Option(CentreSecours[index], index);
 
 else 
 console.log("rien à afficher");

input[type='checkbox'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;


input[type='radio'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;


input[type='radio']:checked 
 background-color: red;


input[type='checkbox']:checked 
 background-color: red;


input::placeholder 
 font-size: 0.7rem;


select 
 border-radius: 20px;
 font-size: 0.8rem;


select:focus 
 border-color: #ff2400;
 outline: 0;
 box-shadow: none;

<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité générale :&nbsp;&nbsp;
 <select onchange="DisplayEntiteL()" data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
 id="TypeEntityId" name="TypeEntityId">
 <option value="">Sélectionnez une entité générale</option>
 <option value="2">Départements &amp; Services centraux</option>
 <option value="3">Centre de secours</option>
 <option value="4">Section locale (Bruxelles) </option>
 <option value="5">Comité Provincial</option>
 <option value="6">Relais</option>
 <option value="7">SISU</option>
 <option value="8">Centre ADA</option>
 <option value="9">Maison Croix-Rouge</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="TypeEntityId" data-valmsg-replace="true"></span>
 </div>

</div>
<br>
<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité locale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field EntityId must be a number." data-val-range="The field EntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner une ENTITE"
 id="EntityId" name="EntityId">
 <option value="">Sélectionnez une entité locale</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="EntityId" data-valmsg-replace="true"></span>
 </div>

</div>

var EntiteGenerale = document.getElementById("TypeEntityId");
var select = document.getElementById("EntityId");
var index;

var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
;

var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
;




function DisplayEntiteL() 
 EntiteGenerale = parseFloat(EntiteGenerale.value);
 if (EntiteGenerale === 2) 
 for (index in Departement) 
 select.options[select.options.length] = new Option(Departement[index], index);
 
 else if (EntiteGenerale === 3) 
 for (index in CentreSecours) 
 select.options[select.options.length] = new Option(CentreSecours[index], index);
 
 else 
 console.log("rien à afficher");

input[type='checkbox'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;


input[type='radio'] 
 -webkit-appearance: none;
 -moz-appearance: none;
 -o-appearance: none;
 border: 1px solid rgba(0, 0, 0, 0.1);
 width: 15px;
 height: 15px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;


input[type='radio']:checked 
 background-color: red;


input[type='checkbox']:checked 
 background-color: red;


input::placeholder 
 font-size: 0.7rem;


select 
 border-radius: 20px;
 font-size: 0.8rem;


select:focus 
 border-color: #ff2400;
 outline: 0;
 box-shadow: none;

<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité générale :&nbsp;&nbsp;
 <select onchange="DisplayEntiteL()" data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
 id="TypeEntityId" name="TypeEntityId">
 <option value="">Sélectionnez une entité générale</option>
 <option value="2">Départements &amp; Services centraux</option>
 <option value="3">Centre de secours</option>
 <option value="4">Section locale (Bruxelles) </option>
 <option value="5">Comité Provincial</option>
 <option value="6">Relais</option>
 <option value="7">SISU</option>
 <option value="8">Centre ADA</option>
 <option value="9">Maison Croix-Rouge</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="TypeEntityId" data-valmsg-replace="true"></span>
 </div>

</div>
<br>
<div class="row col-md-12">
 <div class="col-md-12">
 Votre entité locale :&nbsp;&nbsp;
 <select data-val="true" data-val-number="The field EntityId must be a number." data-val-range="The field EntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner une ENTITE"
 id="EntityId" name="EntityId">
 <option value="">Sélectionnez une entité locale</option>
 </select>
 <span class="field-validation-valid text-danger" data-valmsg-for="EntityId" data-valmsg-replace="true"></span>
 </div>

</div>

edited Mar 8 at 10:13

answered Mar 8 at 10:03

prasanth

14.6k21437

edited Mar 8 at 10:13

answered Mar 8 at 10:03

prasanth

14.6k21437

answered Mar 8 at 10:03

prasanth

14.6k21437

answered Mar 8 at 10:03

prasanth

14.6k21437

Why parseFloat(EntiteGenerale.value) and not parseInt(EntiteGenerale.value)? Or even +EntiteGenerale.value?

– iArcadia
Mar 8 at 10:06

1

@iArcadia. Because parseFloat is better approach for number.The will convert to number both normal and decimal value see this image in my updated answer

– prasanth
Mar 8 at 10:13

Thanks for your explanation.

– iArcadia
Mar 8 at 10:16

add a comment |

Why parseFloat(EntiteGenerale.value) and not parseInt(EntiteGenerale.value)? Or even +EntiteGenerale.value?

– iArcadia
Mar 8 at 10:06

1

@iArcadia. Because parseFloat is better approach for number.The will convert to number both normal and decimal value see this image in my updated answer

– prasanth
Mar 8 at 10:13

Thanks for your explanation.

– iArcadia
Mar 8 at 10:16

Why parseFloat(EntiteGenerale.value) and not parseInt(EntiteGenerale.value)? Or even +EntiteGenerale.value?

– iArcadia
Mar 8 at 10:06

@iArcadia. Because parseFloat is better approach for number.The will convert to number both normal and decimal value see this image in my updated answer

– prasanth
Mar 8 at 10:13

Thanks for your explanation.

– iArcadia
Mar 8 at 10:16

add a comment |

Thank you so much @prasanth!

After a few more researches, I tried this who works perfectly.
I added a function to clear the select before displaying new object inside.

 <select onchange="DisplayEntiteL(event)"></select>

 var EntiteGenerale = document.getElementById("TypeEntityId");
 var select = document.getElementById("EntityId");
 var index;

 var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
 ;

 var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
 ;


 function clearOption()
 var x = document.getElementById("EntityId");
 while (x.length != 0) 
 x.remove(x.length-1);
 
 

 function DisplayEntiteL(event) 
 if (event.target.value === '1') 
 clearOption();
 for (index in Departement) 
 select.options[select.options.length] = new Option(Departement[index], index);
 
 else if (event.target.value === '2') 
 clearOption();
 for (index in CentreSecours) 
 select.options[select.options.length] = new Option(CentreSecours[index], index);
 
 else 
 console.log("rien à afficher");

answered Mar 8 at 11:36

G. Delvigne

7019

add a comment |

Thank you so much @prasanth!

After a few more researches, I tried this who works perfectly.
I added a function to clear the select before displaying new object inside.

 <select onchange="DisplayEntiteL(event)"></select>

 var EntiteGenerale = document.getElementById("TypeEntityId");
 var select = document.getElementById("EntityId");
 var index;

 var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
 ;

 var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
 ;


 function clearOption()
 var x = document.getElementById("EntityId");
 while (x.length != 0) 
 x.remove(x.length-1);
 
 

 function DisplayEntiteL(event) 
 if (event.target.value === '1') 
 clearOption();
 for (index in Departement) 
 select.options[select.options.length] = new Option(Departement[index], index);
 
 else if (event.target.value === '2') 
 clearOption();
 for (index in CentreSecours) 
 select.options[select.options.length] = new Option(CentreSecours[index], index);
 
 else 
 console.log("rien à afficher");

answered Mar 8 at 11:36

G. Delvigne

7019

add a comment |

Thank you so much @prasanth!

After a few more researches, I tried this who works perfectly.
I added a function to clear the select before displaying new object inside.

 <select onchange="DisplayEntiteL(event)"></select>

 var EntiteGenerale = document.getElementById("TypeEntityId");
 var select = document.getElementById("EntityId");
 var index;

 var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
 ;

 var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
 ;


 function clearOption()
 var x = document.getElementById("EntityId");
 while (x.length != 0) 
 x.remove(x.length-1);
 
 

 function DisplayEntiteL(event) 
 if (event.target.value === '1') 
 clearOption();
 for (index in Departement) 
 select.options[select.options.length] = new Option(Departement[index], index);
 
 else if (event.target.value === '2') 
 clearOption();
 for (index in CentreSecours) 
 select.options[select.options.length] = new Option(CentreSecours[index], index);
 
 else 
 console.log("rien à afficher");

answered Mar 8 at 11:36

G. Delvigne

7019

Thank you so much @prasanth!

After a few more researches, I tried this who works perfectly.
I added a function to clear the select before displaying new object inside.

 <select onchange="DisplayEntiteL(event)"></select>

 var EntiteGenerale = document.getElementById("TypeEntityId");
 var select = document.getElementById("EntityId");
 var index;

 var Departement = 
 1: "Finances et Administration",
 2: "Service Logistique Transversale",
 3: "Institut de Formation",
 4: "Communication, Marketing & Commercial",
 5: "Volontariat",
 6: "Ressources Humaines",
 7: "Service francophone du sang",
 8: "Service ECM et DIH",
 9: "Service Tracing",
 10: "Département Secours"
 ;

 var CentreSecours = 
 1: "CG BUTGENBACH BULLINGEN",
 2: "CS BLEGNY",
 3: "CS BRABANT OUEST",
 4: "CS CHARLEROI",
 5: "CS HAUTE SENNE",
 6: "CS HERSTAL - OUPEYE",
 7: "CS TOURNAI",
 8: "CS NAMUR",
 9: "CS OTTIGNIES",
 10: "CS OUGREE",
 11: "CS PHILIPPEVILLE",
 12: "CS ROCHEFORT",
 13: "CS SPA",
 14: "CS HESBAYE-CONDROZ",
 15: "CS JODOIGNE",
 16: "CS LIEGE",
 17: "CS LUXEMBOURG",
 18: "CS MONS",
 19: "CS MOUSCRON"
 ;


 function clearOption()
 var x = document.getElementById("EntityId");
 while (x.length != 0) 
 x.remove(x.length-1);
 
 

 function DisplayEntiteL(event) 
 if (event.target.value === '1') 
 clearOption();
 for (index in Departement) 
 select.options[select.options.length] = new Option(Departement[index], index);
 
 else if (event.target.value === '2') 
 clearOption();
 for (index in CentreSecours) 
 select.options[select.options.length] = new Option(CentreSecours[index], index);
 
 else 
 console.log("rien à afficher");

answered Mar 8 at 11:36

G. Delvigne

7019

answered Mar 8 at 11:36

G. Delvigne

7019

answered Mar 8 at 11:36

G. Delvigne

7019

answered Mar 8 at 11:36

G. Delvigne

7019

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ufdjrw

3 Answers
3

Your Answer

Post as a guest

3 Answers
3

3 Answers
3

Post as a guest

Popular posts from this blog

1928 у кіно

Захаров Федір Захарович

Ель Греко

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Post as a guest

3 Answers 3

3 Answers 3

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

1928 у кіно

Захаров Федір Захарович

Ель Греко

3 Answers
3

3 Answers
3

3 Answers
3