Using JavaScript, populate a <select> menu with multiple <option> elements generated from an object

Question

Using JavaScript, populate a <select> menu with multiple <option> elements generated from an object

I am working on creating a form that includes two select elements. The second select's options should change based on the choice made in the first one.

For example, if value 1 is selected in select 1 => Display object 1 as options in select 2.

Below is the JavaScript code I have written:

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

var Departement = {
  1: "Finances et Administration",
  2: "Service Logistique Transversale",
  // Remaining Department objects...
};

var CentreSecours = {
  1: "CG BUTGENBACH BULLINGEN",
  2: "CS BLEGNY",
  // Remaining Centre Secours objects...
}; 

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("Nothing to display");
  }
}

However, when testing the functionality of the code, the "Nothing to display" message is always shown because the options are not being added correctly.

Could someone please review my code and let me know what might be wrong? You can view the full code on this JSFiddle link.

Thank you for your assistance.

Kind regards,

javascript object select

Answer 1

Answer №1

If I grasp your inquiry correctly, you aim to have the <option> elements within the EntityId select change dynamically based on the value of the TypeEntityId select element. It's recommended to modify your code by adding the change event to the TypeEntityId select using the addEventListener() method:

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

Furthermore, adjust your if conditions so that the values in the comparisons are strings for fulfilling the value matching conditions:

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

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

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

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

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

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

The above code snippet also introduces the event parameter, enabling access to the value of the TypeEntityId select within the event handler. For a fully functional example, refer to this JSFiddle link, or take a look at the provided sample below:

...

Answer 2

If I grasp your inquiry correctly, you aim to have the <option> elements within the EntityId select change dynamically based on the value of the TypeEntityId select element. It's recommended to modify your code by adding the change event to the TypeEntityId select using the addEventListener() method:

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

Furthermore, adjust your if conditions so that the values in the comparisons are strings for fulfilling the value matching conditions:

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

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

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

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

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

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

The above code snippet also introduces the event parameter, enabling access to the value of the TypeEntityId select within the event handler. For a fully functional example, refer to this JSFiddle link, or take a look at the provided sample below:

...

Answer 3

Answer №2

Ensure to store the selected value before executing the change function in order to maintain consistency.
Call the function inside the change event handler for accuracy.
Remember to convert the selected value to an integer from a string to avoid === returning false, as it validates datatype as well.

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

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

var CentreSecours = {
  1: "CG BUTGENBACH BULLINGEN",
  2: "CS BLEGNY",
  3: "CS BRABANT OUEST",
  4: "CS CHARLEROI",
  5: "CS HAUTE SENNE",
  6: "CS HERSTAL - OUPEYE",
  7: "CS TOURNAI",
  8: "CS NAMUR",
  9: "CS OTTIGNIES",
  10: "CS OUGREE",
  11: "CS PHILIPPEVILLE",
  12: "CS ROCHEFORT",
  13: "CS SPA",
  14: "CS HESBAYE-CONDROZ",
  15: "CS JODOIGNE",
  16: "CS LIEGE",
  17: "CS LUXEMBOURG",
  18: "CS MONS",
  19: "CS MOUSCRON"
};
function DisplayEntiteL() {
  EntiteGenerale = parseFloat(EntiteGenerale.value);
  if (EntiteGenerale === 2) {
    for (index in Departement) {
      select.options[select.options.length] = new Option(Departement[index], index);
    }
  } else if (EntiteGenerale === 3) {
    for (index in CentreSecours) {
      select.options[select.options.length] = new Option(CentreSecours[index], index);
    }
  } else {
    console.log("rien à afficher");
  }
}

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

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

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

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

input::placeholder {
  font-size: 0.7rem;
}

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

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

<div class="row col-md-12">
  <div class="col-md-12">
    Votre entité générale :&nbsp;&nbsp;
    <select onchange="DisplayEntiteL()" data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
      id="TypeEntityId" name="TypeEntityId">
      &e [...]

Find out why parseFloat is crucial:

https://i.sstatic.net/DVkhL.png

Answer 4

Ensure to store the selected value before executing the change function in order to maintain consistency.
Call the function inside the change event handler for accuracy.
Remember to convert the selected value to an integer from a string to avoid === returning false, as it validates datatype as well.

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

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

var CentreSecours = {
  1: "CG BUTGENBACH BULLINGEN",
  2: "CS BLEGNY",
  3: "CS BRABANT OUEST",
  4: "CS CHARLEROI",
  5: "CS HAUTE SENNE",
  6: "CS HERSTAL - OUPEYE",
  7: "CS TOURNAI",
  8: "CS NAMUR",
  9: "CS OTTIGNIES",
  10: "CS OUGREE",
  11: "CS PHILIPPEVILLE",
  12: "CS ROCHEFORT",
  13: "CS SPA",
  14: "CS HESBAYE-CONDROZ",
  15: "CS JODOIGNE",
  16: "CS LIEGE",
  17: "CS LUXEMBOURG",
  18: "CS MONS",
  19: "CS MOUSCRON"
};
function DisplayEntiteL() {
  EntiteGenerale = parseFloat(EntiteGenerale.value);
  if (EntiteGenerale === 2) {
    for (index in Departement) {
      select.options[select.options.length] = new Option(Departement[index], index);
    }
  } else if (EntiteGenerale === 3) {
    for (index in CentreSecours) {
      select.options[select.options.length] = new Option(CentreSecours[index], index);
    }
  } else {
    console.log("rien à afficher");
  }
}

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

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

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

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

input::placeholder {
  font-size: 0.7rem;
}

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

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

<div class="row col-md-12">
  <div class="col-md-12">
    Votre entité générale :&nbsp;&nbsp;
    <select onchange="DisplayEntiteL()" data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
      id="TypeEntityId" name="TypeEntityId">
      &e [...]

Find out why parseFloat is crucial:

https://i.sstatic.net/DVkhL.png

Answer 5

Answer №3

Big thanks to @prasanth!

After conducting further research, I experimented with a new approach that worked flawlessly. I implemented a function to reset the select element before populating it with new data.

  <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",
      // more department entries...
    };

    var CentreSecours = {
      1: "CG BUTGENBACH BULLINGEN",
      2: "CS BLEGNY",
      3: "CS BRABANT OUEST",
      // more center entries...
    };


    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("No data to display");
      }
    }

Answer 6

Big thanks to @prasanth!

After conducting further research, I experimented with a new approach that worked flawlessly. I implemented a function to reset the select element before populating it with new data.

  <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",
      // more department entries...
    };

    var CentreSecours = {
      1: "CG BUTGENBACH BULLINGEN",
      2: "CS BLEGNY",
      3: "CS BRABANT OUEST",
      // more center entries...
    };


    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("No data to display");
      }
    }

Using JavaScript, populate a <select> menu with multiple <option> elements generated from an object

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing JavaScript Event Listener to Identify the Relevant PHP File for Display

Retrieve coordinates, specifically latitude and longitude, by utilizing AJAX and JSONP

Issue with process.env.NODE_ENV not functioning appropriately in NodeJS when utilizing package.json scripts

Trouble with launching Semantic UI modal

Can we accurately pinpoint individual LineSegments in three.js by hovering over them, especially those with unique geometries?

THREE.js - Attempting to find the closest point (Vector 3) on an object based on a Vector 3 created from a mouse

The property is returning an empty string, but the function is functioning perfectly

The Fusion of Ember.js and Socket.io: Revolutionizing Web

Remove the class upon clicking

Utilize a generic data type for a property that can accept values of type 'number', 'string', or 'undefined'

Connect the front end files, including HTML, CSS, and JavaScript, to the Node.js backend

Using JavaScript and Regular Expressions for Performing Multiple Replacements

Dealing with Exceptions in NestJS and TypeORM: Troubleshooting "Get Status is not a function"

Encountering a deadly mistake with LNK1181 while attempting to npm install web3

There seems to be an issue with the pastebin api createPasteFromFile method as it is showing an error of 'create

Ways to delete a property from an element that was originally included with jquery

Adding elements to the DOM with JavaScript and inheriting event handlers

Patience is key as we await the arrival of the loaded data before making a return in AngularFire 0

Is there a way in React JS to attempt a function multiple times using try/catch?

Type of Angular Service Issue: string or null