Question

1.。）如何使用javascript保存box1的内容并将其存储到变量（x）中，用逗号分隔它们？由于我将在后台进行一些数据库工作，因此使用此方法存储值非常重要。

下拉框中的内容示例：

[BOX1]
volvo
saab
mercedes
audi

结果var：

var x = volvo,saab,mercedes,audi

2.。）使用变量（x）如何用逗号分隔值重新填充下拉[BOX2]。

[BOX2]
volvo
saab
mercedes
audi

这是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>

Answer 1

您可以通过添加事件处理程序来检索选项并将它们放入其他选择框中。

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);

将下拉框的内容存储到var中，然后使用var加载新的下拉框内容

1 个答案: