Javascript 如何用html为onchange脚本保存数据？

我有两个精选的。第二个选项的值/文本将根据第一个选项中选择的内容而变化

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

• 如何在html中保存onchange函数的数据
• 如何在javascript代码中更改第二次选择html定义（文本/值+选项数）

请注意，我不想使用任何javascript框架，我想这回答了您的问题

自定义数据属性是名称以字符串“data-”开头、在连字符后至少有一个字符、与XML兼容且不包含范围在U+0041到U+005A（拉丁文大写字母A到拉丁文大写字母Z）之间的任何命名空间中的属性

自定义数据属性用于存储页面或应用程序专用的自定义数据，没有更合适的属性或元素

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

// 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
...
...
var s2d=document.getElementById（“select2data”）
，选择2data={}；
对于（var i=0；i就标准、HTML级别和浏览器兼容性而言，您有哪些限制？您能提供HTML5功能吗？@Stephen:我想我没有限制。我写这个php脚本是为了让我的日常生活更轻松。php 5.3、firefox 3.6.15、OSX。如果它也能在chrome中工作，那就太好了。IE中没有人会告诉我们这一点。我打算建议使用HTML5个本地数据库，但目前只能由-webkit浏览器使用。谢谢@Stephen，我相信@maerics给了我工作的解决方案：-）@maerics：这看起来很棒！我甚至理解你写的内容：-）你能解释一下这部分吗：“/添加每个选项，考虑到浏览器的差异。”？这里只有一个问题“新选项（操作系统）”[i] [0]，os[i][1]）“第一个参数是文本，第二个参数是值？@Radek:DOM的add方法有一个可选的第二个参数，但一些旧浏览器需要它，您不能总是盲目地使用“null”作为第二个参数。因此，如果不起作用，请尝试正确的方法，然后尝试错误的方法=）@Radek：是的，DOM构造函数接受参数“text”和“value”。
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;
};