Display a printing choice for every element within an array

Question

Display a printing choice for every element within an array

I'm currently working with an array and attempting to add a new <option> element for each item in the array.

Here is the approach I have taken:

 array.forEach(function(arr) {
   console.log(array);
   $(".filterSection .department").append('<option value="'+array+'">'+array+'</option>');
 });

However, the issue lies in the fact that when the options are generated, all values in the array are displayed within each <option>. Although new option tags are created, they end up containing all items from the array as their value and text.

Check out the complete demo below:

var array = ["Value 1", "Value 2", "Value 3"];

array.forEach(function(arr) {
  console.log(array);
  $(".department").append('<option value="' + array + '">' + array + '</option>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="department" name="department" id="department"></select>

Could you please point out where I might be making a mistake?

javascript arrays

Answer 1

Answer №1

It is recommended to utilize arr as the representation of a single array element rather than array:

var array = ["Value 1", "Value 2", "Value 3"];

array.forEach(function(arr) {
  $(".department").append('<option value="' + arr + '">' + arr + '</option>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="department" name="department" id="department"></select>

Answer 2

It is recommended to utilize arr as the representation of a single array element rather than array:

var array = ["Value 1", "Value 2", "Value 3"];

array.forEach(function(arr) {
  $(".department").append('<option value="' + arr + '">' + arr + '</option>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="department" name="department" id="department"></select>

Answer 3

Answer №2

Have you considered approaching it in this way instead:

var choices = list.map(function(item) {
  return '<option value="' + item + '">' + item + '</option>'
});

$(".category").html(choices.join(''))

By using this technique, you can optimize performance by reducing the number of times the DOM is accessed, especially within a loop.

Answer 4

Have you considered approaching it in this way instead:

var choices = list.map(function(item) {
  return '<option value="' + item + '">' + item + '</option>'
});

$(".category").html(choices.join(''))

By using this technique, you can optimize performance by reducing the number of times the DOM is accessed, especially within a loop.

Answer 5

Answer №3

If you want to achieve this using JavaScript, follow these steps:

var array = ["Value 1", "Value 2", "Value 3"];

var select = document.getElementById("department");
array.map(function(item){
var option = document.createElement("option");
option.value = item;
option.text  = item;
select.appendChild(option)
});

<select name="department" id="department"></select>

Answer 6

If you want to achieve this using JavaScript, follow these steps:

var array = ["Value 1", "Value 2", "Value 3"];

var select = document.getElementById("department");
array.map(function(item){
var option = document.createElement("option");
option.value = item;
option.text  = item;
select.appendChild(option)
});

<select name="department" id="department"></select>

Display a printing choice for every element within an array

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to ensure that all recursive calls have completed before proceeding in Javascript?

What is the significance of using composability over the deprecated method in Reactjs Material-UI menuItems?

Retrieve the current date and time in JSON format using moment.js for the local

Creating instances of a class using elements from an array

How can I automatically copy a highlighted link in HTML?

Tips on setting pre-defined data in a ReactJS form builder field

How can labels be added when mapping over JSON data?

Sending image URLs as props in React-Modal might cause an error if not handled properly - TypeError: Cannot read properties of undefined (reading 'map') - so make sure to

Acquiring HTML Element Data with Clojure

The function Waterline.create() is not available

Can studying Titanium Appcelerator enhance my comprehension of NodeJS?

Utilizing the parameter "error" to distinguish unsuccessful tasks within async.mapLimit

Navbar Collapse in Bootstrap 5 not functioning properly when losing focus

When a string containing a space is pushed into an array in Perl, it creates two separate elements within the array

Running an Angular-made Chrome extension within an iframe: A guide

"Implementing a feature in AngularJS to dynamically display markers on a Google Map based on latitude and

Every time a button is clicked on the interface, a new element or button will appear. This functionality is made possible through

Responsive div that reacts to scrolling

Avoiding default action on keyboard tab event resets cursor position while typing consecutively

Using Javascript and ExtJS to retrieve the Codemirror Editor using a textarea