Home/ Questions/Q 9187239
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T19:43:12+00:00

1.) How can I use javascript to save the contents of box1 and store

  • 0

1.) How can I use javascript to save the contents of box1 and store it into a variable (x), separating them all by commas?
Since I will be doing some database work in the background, it is important that the values are stored using this method.

Example of whats in the drop down box:

[BOX1]
volvo
saab
mercedes
audi

Resulting var:

var x = volvo,saab,mercedes,audi

2.) Using the variable (x) how can I repopulate the drop down [BOX2] with the comma separated values.

[BOX2]
volvo
saab
mercedes
audi

Here is the HTML:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<select id="box1" style="width: 100px;">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br>
<input type="button" value="Save" name="Save">

<br><br>

<input type="button" value="Populate" name="Populate"><br>

<select id="box2" style="width: 100px;" name="D1"></select>

<br>

</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could retrieve the options and simply put them into the other selectbox, by adding an event handler.

    Working Example 

    //temp holds DOM elements
//temp2 holds only the values

var temp = [];
var temp2 = [];

function save() {
  var cH = document.getElementById('box1').children;
  for (var i in cH) {
    if(cH.hasOwnProperty(i) && cH[i].nodeName == 'OPTION') {
      temp.push(cH[i]);
      temp2.push(cH[i].value);
    }
  }
  alert(arr2csv());
}

function populate() {
  var popul = csv2arr();
  var box2 = document.getElementById('box2');
  /*
  for(var i=0;i<temp.length; i++) {
    box2.options.add(new Option(temp[i].text,temp[i].value));
  }
*/
  for(var i=0;i<popul.length; i++) {
    box2.options.add(new Option(popul[i],popul[i]));
  }
}

function arr2csv() {
  return temp2.join();
}

function csv2arr() {
    return arr2csv().split(',');
}

document.getElementById('testsave').addEventListener("click", save);
document.getElementById('testpopulate').addEventListener("click", populate);
    • 0