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;
1
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. DelvigneG. Delvigne
7019
add a comment |
1
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. DelvigneG. 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 |
1
1
1
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. DelvigneG. 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
javascript object select
asked Mar 8 at 9:40
G. DelvigneG. Delvigne
7019
asked Mar 8 at 9:40
G. DelvigneG. Delvigne
7019
asked Mar 8 at 9:40
G. DelvigneG. Delvigne
7019
asked Mar 8 at 9:40
G. DelvigneG. Delvigne
7019
asked Mar 8 at 9:40
G. DelvigneG. Delvigne
7019
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
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
1
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 :
<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 & 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 :
<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 DennyDacre Denny
14.6k41233
add a comment |
1
- 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 :
<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 & 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 :
<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
answered Mar 8 at 10:03
prasanthprasanth
14.6k21437
WhyparseFloat(EntiteGenerale.value)and notparseInt(EntiteGenerale.value)? Or even+EntiteGenerale.value?
– iArcadia
Mar 8 at 10:06
1
@iArcadia. BecauseparseFloatis 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 |
0
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. DelvigneG. 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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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 :
<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 & 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 :
<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 DennyDacre Denny
14.6k41233
add a comment |
1
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 :
<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 & 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 :
<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 DennyDacre Denny
14.6k41233
add a comment |
1
1
1
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 :
<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 & 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 :
<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 DennyDacre Denny
14.6k41233
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 :
<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 & 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 :
<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 :
<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 & 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 :
<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 :
<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 & 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 :
<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 DennyDacre Denny
14.6k41233
answered Mar 8 at 10:12
Dacre DennyDacre Denny
14.6k41233
answered Mar 8 at 10:12
Dacre DennyDacre Denny
14.6k41233
answered Mar 8 at 10:12
Dacre DennyDacre Denny
14.6k41233
14.6k41233
add a comment |
add a comment |
1
- 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 :
<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 & 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 :
<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
answered Mar 8 at 10:03
prasanthprasanth
14.6k21437
WhyparseFloat(EntiteGenerale.value)and notparseInt(EntiteGenerale.value)? Or even+EntiteGenerale.value?
– iArcadia
Mar 8 at 10:06
1
@iArcadia. BecauseparseFloatis 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 |
1
- 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 :
<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 & 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 :
<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
answered Mar 8 at 10:03
prasanthprasanth
14.6k21437
WhyparseFloat(EntiteGenerale.value)and notparseInt(EntiteGenerale.value)? Or even+EntiteGenerale.value?
– iArcadia
Mar 8 at 10:06
1
@iArcadia. BecauseparseFloatis 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 |
1
1
1
- 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 :
<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 & 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 :
<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
answered Mar 8 at 10:03
prasanthprasanth
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 :
<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 & 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 :
<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
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 :
<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 & 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 :
<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 :
<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 & 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 :
<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:03
prasanthprasanth
14.6k21437
edited Mar 8 at 10:13
answered Mar 8 at 10:03
prasanthprasanth
14.6k21437
answered Mar 8 at 10:03
prasanthprasanth
14.6k21437
answered Mar 8 at 10:03
prasanthprasanth
14.6k21437
14.6k21437
WhyparseFloat(EntiteGenerale.value)and notparseInt(EntiteGenerale.value)? Or even+EntiteGenerale.value?
– iArcadia
Mar 8 at 10:06
1
@iArcadia. BecauseparseFloatis 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 |
WhyparseFloat(EntiteGenerale.value)and notparseInt(EntiteGenerale.value)? Or even+EntiteGenerale.value?
– iArcadia
Mar 8 at 10:06
1
@iArcadia. BecauseparseFloatis 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
Why
parseFloat(EntiteGenerale.value) and not parseInt(EntiteGenerale.value)? Or even +EntiteGenerale.value?– iArcadia
Mar 8 at 10:06
1
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
@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
Thanks for your explanation.
– iArcadia
Mar 8 at 10:16
add a comment |
0
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. DelvigneG. Delvigne
7019
add a comment |
0
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. DelvigneG. Delvigne
7019
add a comment |
0
0
0
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. DelvigneG. 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. DelvigneG. Delvigne
7019
answered Mar 8 at 11:36
G. DelvigneG. Delvigne
7019
answered Mar 8 at 11:36
G. DelvigneG. Delvigne
7019
answered Mar 8 at 11:36
G. DelvigneG. Delvigne
7019
7019
add a comment |
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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