JS变量为HTML元素，反之亦然

Question

一开始我有JSON数据，我需要将列表转换并输出为html。

var frut = 
{
    "wtfrut": [
        ["0x01", "Apple"],
        ["0x02", "Orange"],
        ["0x03", "Pineapple"],
        ["0x04", "Banana"]
    ],
    [other irrelevant elements]
}

我将其设为html <select>以及<options>的列表。 。

<select>
  <option data-index="0x01">Apple</option>
  <option data-index="0x02">Orange</option>
  <option data-index="0x03">Pineapple</option>
  <option data-index="0x04">Banana</option>
</select>

。 。 。并将其粘贴在js变量中。

此<select>列表是表格中的单元格，需要显示几百行。

在构建表格时，当我需要显示下拉列表时，我需要返回并找到每个selected的{​​{1}}属性

问题1）

我能从

得到的最好的

<select><option>

是var select = document.createElement("select"); var options = document.createElement("option"); options.setAttribute("value", element[1]); ... select.appendChild(options); return select; ，其中应该是下拉列表。 [object HTMLSelectElement]会返回列表中第一项的return select.value属性。

因此，我使用原始html填充value。

var dropDown

因为它有效。 out += "<option value=\"" + element[1] + "\" data-hex = \"" + element[0] + "\" data-index = \"" + index + "\">"; 随dropDown和所有<select>结束。当我用

调用它时，它可以正常工作

<option>

问题2）

现在 正在工作，我尝试在渲染时将"<td class=\"vkeyName\" data-f4key-index = \"+index+\">" + dropDown + "</td>" 返回到js（在产生上述{的循环期间{1}}）并确定哪个dropDown需要选择作为下拉列表的默认值。 <td>返回我理解的字符串长度。它只是一个js字符串。

总体

我不明白的是如何在任何一个方向上获取js变量和有效html元素之间的阈值数据。将js字符串转换为可输出到html页面的有效html元素列表...或者获取有效的html元素，将它们放入变量以供js工作。

<option>和select.length无法正常工作。我认为因为我还没有文件，我正在构建对象。

此时我对js库和助手不感兴趣。这是一个学习项目，我想了解这一点，以便像jQuery这样的东西不是那么神奇。

Answer 1

我做了一个小例子，说明如何创建一个组合框，生成某种数据的数组，以及如何通过使用一些回调函数来获取值和文本，以及如何帮助自己选择应该预先选择哪个元素，以及如何对html元素中的更改做出反应。

你总是可以使用document.getElementById，但你必须等到你确定页面被加载，一种方法是等待window.onload函数触发（这意味着DOM已准备好进行操作，脚本和css已加载）

在vanilla javascript中，您可以通过在load事件上注册回调函数来实现，如下所示：

window.addEventListener('load', function() { ... });

为了生成组合框，我创建了一个小帮助程序命名空间并添加了一个comboBoxGenerator，它接受一个对象，并在你想要的targetElement中生成组合框。

然后我迭代数据并为每个元素，通过回调函数（您在调用生成器时定义）获取值和文本，并返回该单个选项的值和文本。它还确定是否应该预先选择元素。

通过注册组合框的change事件，您可以找出实际选择的元素，为此我还添加了一个小函数，显示函数已更改

'use strict;＆＃39;语句有助于将例如forEach函数添加到数组中，并将帮助您保持代码更加干净

我还记录了一点来源，以便您希望了解一切正在做什么：）

＆＃13;

＆＃13;

'use strict';

var helper = {};

(function(ns) {
  
  function comboBoxGenerator(options) {
    // get the element that you are targetting
    var el = document.getElementById(options.target),
        cmb = document.createElement('select'),
        option;
    
    // iterate the data, and for each element in the array, create an option and call the defined callback functions
    options.data.forEach(function(item) {
      option = document.createElement('option');
      option.value = options.valueSelector(item);
      option.text = options.textSelector(item);
      option.selected = options.isSelected(item);
      // add the option to the combobox
      cmb.appendChild(option);
    });
    // listen to changes on the combobox and then call the selectionChanged event
    cmb.addEventListener('change', function(e) {
      // this = cmb because of the bind statement on below
      // call the selectionChanged callback function, and assing the cmb as the this for the callback function (.apply(this, ...))
      options.selectionChanged.apply(this, [this.options[this.selectedIndex]]);
    }.bind(cmb));
    el.appendChild(cmb);
  }
  
  // set the combo function on the helper by either reusing an existing function, or the function just written above
  ns.combo = ns.combo || comboBoxGenerator;
  
}(helper));

// wait till all resources are loaded, and then generate the combobox
window.addEventListener('load', function() {
  var dummyData = {
    "wtfrut": [
        ["0x01", "Apple"],
        ["0x02", "Orange"],
        ["0x03", "Pineapple"],
        ["0x04", "Banana"]
    ]
  }, selectedValue = "0x03";
  
  // call the helper method with an object defining the data, targetelement, and callback functions
  helper.combo({
    target: 'myTable', 
    data: dummyData.wtfrut, 
    valueSelector: function(item) { 
      // item would be like ["0x01", "Apple"], return "0x01" for value
      return item[0]; 
    },
    textSelector: function(item) {
      return item[1];
    },
    isSelected: function(item) {
      // check if the item matches a selectedValue if so, return true, not false
      return item[0] === selectedValue;
    },
    selectionChanged: function(item) {
      // gets called when the selection is changed, item = Option, value is the current value, this = combobox
      selectedValue = item.value;
      console.log('selectedValue changed to ' + selectedValue + ' index = ' + this.selectedIndex);
    }
  });
});

＆＃13;

<div>
  <div id="myTable">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;