Populating a drop down box with a variable containing comma seperated values

Question

How can I, populate a select box based on a variable that will contain data by comma separated values?

Example:

var x = Jenny,John,Stephanie,Marc,Ryan,Jessica

Expected result:

[DROP DOWN BOX]
Jenny
John
Stephanie
Marc
Ryan
Jessica

This question is similar: http://stackoverflow.com/questions/4514323/javascript-equivalent-to-explode — Schleis, Jan 25 '13 at 14:40
http://stackoverflow.com/questions/9895082/javascript-populate-drop-down-list-with-array check this — , Jan 25 '13 at 14:40

codingbiz · Accepted Answer · 2013-01-25T14:56:27.460

3

http://jsfiddle.net/fYN7M/

HTML

<select id="myoptions">

</select>

JavaScript

var x = "Jenny,John,Stephanie,Marc,Ryan,Jessica";

var options = x.split(",");

var select = document.getElementById('myoptions');
for(var i=0; i<options.length; i++)
{
  select.options[i] = new Option(options[i], i);  //new Option("Text", "Value")
}

edited Jan 25 '13 at 14:56

answered Jan 25 '13 at 14:50

codingbiz

26,179
8
59
96

1

I'm not sure how this differs from the answer I posted 2 minutes before, but oh well. – crowjonah Jan 25 '13 at 15:15
1

I'm not sure how this is not an almost exact copy of the answer I posted 7 minutes before, but oh well. – Jules Jan 25 '13 at 15:23
Just checking your answer now, the difference is the fiddle and it's actually different. I used Option("Text", "Value") and you used CreateElement. :) – codingbiz Jan 25 '13 at 15:41

score 1 · Answer 2 · answered Jan 25 '13 at 14:43

Something like this should work:

<select id="DropDownList">

</select>

<script type="text/javascript" language="javascript">
   var x = "Jenny,John,Stephanie,Marc,Ryan,Jessica";
   var splitValues = x.split(",");
   for (var i = 0; i < splitValues.length; i++) {
      var opt = document.createElement("option");

      // Add an Option object to Drop Down/List Box
      document.getElementById("DropDownList").options.add(opt);

      // Assign text and value to Option object
      opt.text = splitValues[i];
      opt.value = splitValues[i];
   }
</script>

score 1 · Answer 3 · answered Jan 25 '13 at 14:46

Here's some pure javascript for you:

var x = 'Jenny,John,Stephanie,Marc,Ryan,Jessica';
x = x.split(',');

select = document.createElement('select');

for (var i=0;i<x.length;i++) { 
    var new_option_element = new Option(x[i], x[i]);
    select.appendChild(new_option_element);
}

document.body.appendChild(select);

http://jsfiddle.net/crowjonah/ZwtUF/1/

Antony · Answer 4 · 2013-01-25T14:53:06.763

0

JavaScript

var x = 'Jenny,John,Stephanie,Marc,Ryan,Jessica'.split(',');
for (var i=0; i<x.length; i++) {
    document.getElementById("names").options[i] = new Option(x[i], x[i]);
}

HTML

<select id="names"></select>

Demo

http://jsfiddle.net/hyA96/

edited Jan 25 '13 at 14:53

answered Jan 25 '13 at 14:42

Antony

14,900
10
46
74

I believe IE has problems setting innerHTML when dealing with `select` tags – crowjonah Jan 25 '13 at 14:49

score 0 · Answer 5 · answered Jan 25 '13 at 14:47

A simple means of this is:

function populateWithChildren(parent, childTag, values) {
  if (!parent || !values) {
    // no parent element, or no values, nothing can be done so quit here
    return false;
  } else {
    // this ensures that 'values' is an array:
        // if values is a string, it splits that string (assuming a comma delimiter),
        // and split() returns an array, otherwise:
        // we assume it's already an array and use that.
    values = typeof values === "string" ? values.split(',') : values;
    // iterates through all the values in the 'values' array,
    for (var i = 0, len = values.length; i < len; i++) {
      // creates a new element (as passed in the 'childTag' variable)
      var newElem = document.createElement(childTag),
          text = document.createTextNode(values[i]);
      // appends the textNode to the created element
      newElem.appendChild(text);
      // appends the created-element to the 'parent' node passed to the function
      parent.appendChild(newElem);
    }
  }
}

var parent = document.getElementById('select'),
  x = 'Jenny,John,Stephanie,Marc,Ryan,Jessica';

populateWithChildren(parent, 'option', x);

JS Fiddle demo.

Populating a drop down box with a variable containing comma seperated values

5 Answers5

Linked