javascript - 如何将数据保存在onchange脚本的html中？

Question

我有两个选择。第二个的值/文本将根据第一个选择中选择的内容而有所不同。

我将把 onchange 函数链接到第一个选择。但我不知道

• 如何为 html 中的 onchange 函数保存数据
• 如何在 JavaScript 代码中更改第二个选择 html 定义(文本/值 + 选项数量)

请注意，我不想使用任何 JavaScript 框架

Answer 1

1)我假设您正在寻求有关如何对第二个选择输入的数据进行编码的建议。我建议使用 JavaScript 来存储第一个选择的可能值到第二个选择要使用的值的映射，以便您可以直接对其进行索引，例如:

// Assume "select1" can have option values "English" and "Spanish".
var select2data = {
  'English': [['One', 1], ['Two', 2], ['Three', 3]],
  'Spanish': [['Uno', 1], ['Dos', 2], ['Tres', 3]]
};

这个策略非常简洁，但需要以编程方式生成 JavaScript。如果你确实想使用纯 HTML，那么你可以有一个嵌套的 DIV 结构并根据需要解析它，例如:

<div id="select2data" style="display:none">
  <div id="English">
    <div><div>One</div><div>1</div></div>
    <div><div>Two</div><div>2</div></div>
    ...
  <div id="Spanish">
  ...
<script type="text/javascript">
  var s2d = document.getElementById("select2data")
    , select2data = {};
  for (var i=0; i<s2d.children.length; i++) { // Each of "id=English", etc.
    var data=s2d.children[i], opts=[];
    for (var j=0; j<data.children.length; j++) {
      opts.push(new Option(data.children[j].children[0].firstChild,
                           data.children[j].children[1].firstChild));
    }
    select2data[data.id] = opts;
  }
</script>

2) 现在，设置 select2 的选项可以通过从 select1 的值中查找数据，将它们编码为 DOM Option 对象，然后将它们添加到 select1 来完成:

var sel1 = document.getElementById('select1')
  , sel2 = document.getElementById('select2');
sel1.onchange = function() {
  var os = select2data[sel1.value]; // Get the options required by select1.
  if (os) {
    sel2.options.length = 0; // Clear the options for select2.
    for (var i=0; i<os.length; i++) {
      var o = new Option(os[i][0], os[i][1]);
      try { // Add each option, allowing for browser differences.
        sel2.add(o);
      } catch (ex) {
        sel2.add(o, null);
      }
    }
    sel2.selectedIndex = 0;
  }
  return true;
};

请注意，这一切都未经测试，并且有很大的改进空间，但应该说明这个想法。