how can I give an array as options to select element?

Question

I have a select element on my HTML page. I want to populate it with an array. as we can give an array as dataprovider to comboBox in action script. I do the following

in HTML...

<table>
  <tr>
    <td>
      <label>Recording Mode:</label>
    </td>
    <td>
      <select id="rec_mode">        
      </select>
    </td>
  </tr>
</table>

in javascript...

var videoSrcArr = new Array("option1", "option2", "option3", "option4", "option5");

how can I populate rec_mode element when page is loaded with VideoSrcArr? Thanks

Possible duplicate of [JavaScript - populate drop down list with array](http://stackoverflow.com/questions/9895082/javascript-populate-drop-down-list-with-array) (and various other questions). — nnnnnn, Jan 23 '13 at 05:58

THEtheChad · Accepted Answer · 2018-01-14T16:27:46.257

I highly recommend you use a format like the following:

var options =
[
  {
    "text"  : "Option 1",
    "value" : "Value 1"
  },
  {
    "text"     : "Option 2",
    "value"    : "Value 2",
    "selected" : true
  },
  {
    "text"  : "Option 3",
    "value" : "Value 3"
  }
];

var selectBox = document.getElementById('rec_mode');

for(var i = 0, l = options.length; i < l; i++){
  var option = options[i];
  selectBox.options.add( new Option(option.text, option.value, option.selected) );
}

You don't run in to the problem of having to select a default option and you can easily generate the options array dynamically.

-- UPDATE --

ES6 version of the above code:

let optionList = document.getElementById('rec_mode').options;
let options = [
  {
    text: 'Option 1',
    value: 'Value 1'
  },
  {
    text: 'Option 2',
    value: 'Value 2',
    selected: true
  },
  {
    text: 'Option 3',
    value: 'Value 3'
  }
];

options.forEach(option =>
  optionList.add(
    new Option(option.text, option.value, option.selected)
  )
);

What if you want to do this with the text being the... item and the value being the index? — bb216b3acfd8f72cbc8f899d4d6963, Mar 04 '18 at 21:36
@haykam You could, but then you can't designate if one of them is selected. If that's not part of your requirements, no big deal. Just use an array, map the value to the first parameter and the index to the second. — THEtheChad, Mar 07 '18 at 18:36

ameya rote · Answer 2 · 2013-01-23T06:18:31.620

I would recommend to use object instead of array it will be of great helpful and in respected manner with standards. The reason is WE can index into the object by the "key" and get the "value" . To display contents and resetting them you can follow this NOTES

CHECK HERE

<!DOCTYPE html>
<html>
<body>
<table>
  <tr>
    <td>
      <label>Recording Mode:</label>
    </td>
    <td>
      <select id="rec_mode">        
      </select>
    </td>
  </tr>
</table>
</body>
<script>
var myobject = {
    ValueA : 'Text A',
    ValueB : 'Text B',
    ValueC : 'Text C'
};
var select = document.getElementById("rec_mode");
for(index in myobject) {
    select.options[select.options.length] = new Option(myobject[index], index);
}

</script>
</html>

score 5 · Answer 3 · answered Jan 23 '13 at 06:14

This is the simplest way to populate comboBox with an array.

var j = new Array("option1","option2","option3","option4","option5"),    
var options = '';

for (var i = 0; i < j.length; i++) {
   options += '<option value="' + j[i]+ '">' + j[i] + '</option>';
}
$("#rec_mode").html(options);

score 2 · Answer 4 · edited Jan 23 '13 at 06:03

2

You can do this:

var videoSrcArr = new Array("option1","option2","option3","option4","option5"),
    selectEl = document.getElementById('rec_mode');


for(var i = 0; i < videoSrcArr.length; i++){
    selectEl.options.add(new Option(videoSrcArr[i], videoSrcArr[i]));
}

edited Jan 23 '13 at 06:03

Roopendra

7,674
16
65
92

answered Jan 23 '13 at 05:55

dimusic

4,123
2
28
31

—better to use an array literal than the array constructor as it's less to type and less likely to do unexpected things (e.g. `new Array(9)` vs `[9]`. – RobG Jan 23 '13 at 06:15

score 0 · Answer 5 · answered Aug 03 '15 at 17:00

This is the best way you can get array values in combo box

var states = new Array();
states['India'] = new Array('Andhra Pradesh','Arunachal Pradesh','Assam','Bihar','Chhattisgarh','Goa','Gujarat','Haryana','Himachal Pradesh','Jammu and Kashmir','Jharkhand','Karnataka','Kerala','Madhya Pradesh','Maharashtra','Manipur','Meghalaya','Mizoram','Nagaland','Odisha','Punjab','Rajasthan','Sikkim','Tamil Nadu','Telangana','Tripura','Uttar Pradesh','Uttarakhand','WestBengal','Andaman and Nicobar Islands','Chandigarh','Dadra and Nagar Haveli','Daman and Diu','Lakshadweep','Puducherry'); 

function setStates() {
 var newOptions=states['India'];
 var newValues=states['India'];
 selectField = document.getElementById("state");
 selectField.options.length = 0;
 for (i=0; i<newOptions.length; i++) 
 {
 selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
 }
}

<body  onload="setStates();"
<label>State :</label>
<select style="width:auto;" name="state" id="state">
<option value="">Please select a Country</option>
</select><br>

score 0 · Answer 6 · answered Mar 22 '21 at 16:33

0

A modern solution, using template literals:

["option1", "option2", "option3", "option4", "option5"]
.forEach(op => rec_mode.innerHTML += `<option value="${op}">${op}</option>`);

<select id="rec_mode"></select>

answered Mar 22 '21 at 16:33

AbsoluteBeginner

2,160
3
11
21

how can I give an array as options to select element?

6 Answers6

Linked

Related