从多个 html select 元素获取数据

Question

我正在使用通过 IIFE 实现的 MVC 模式。我从 html 中得到多个条件 select 框，并将它们放入数据模型中。

当我得到 select(s) Node/Element 时也包含选项。

document.querySelectorAll(DOMStrings.selectDepthLevel)

选项是单独的子节点还是只是Select节点内的数组，意思是：

如果我的数据模型中有对选项的引用，我可以 get/modify 选项的属性而不需要通过父 Select 节点吗？

Answer 1

这里有一点帮助:-)

var select = document.getElementById("select");

var data = [{
  value: "option1",
  label: "Option 1"
}, {
  value: "option2",
  label: "Option 2"
}, {
  value: "option3",
  label: "Option 3"
}];

data.forEach(function (x, i) {
  var option = document.createElement("option");
  option.setAttribute("value", data[i].value);
  option.innerHTML = data[i].label;
  select.appendChild(option);
});

function revealData () {
  alert(JSON.stringify(data, 0, 2));
}

function revealHtml () {
  alert(select.innerHTML.replace(/></g, ">\n<"));
}

function editOption (n) {
  var option, value, label, i;
  value = prompt("Value for option #" + n + ":");
  if (value !== null) {
    label = prompt("Label for option #" + n + ":");
    if (label !== null) {
      i = n - 1;
      data[i].value = value;
      data[i].label = label;
      option = select.childNodes[i];
      option.setAttribute("value", data[i].value);
      option.innerHTML = data[i].label;
    }
  }
}

<select id="select"></select>
<button type="button" onclick="editOption(1)">Edit 1</button>
<button type="button" onclick="editOption(2)">Edit 2</button>
<button type="button" onclick="editOption(3)">Edit 3</button>
<button type="button" onclick="revealData()">Reveal data</button>
<button type="button" onclick="revealHtml()">Reveal HTML</button>

从多个 html select 元素获取数据

Get data from multiple html select element

javascript

dom

html-select