时间戳

首页 > 解决方案 > Javascript 表单选择

javascript - Javascript 表单选择

问题描述

我想根据用户的选择为用户提供两种不同 HTML 表单的选项。从这里和其他一些资源收集，这是我到目前为止所拥有的。它适用于我的 Edge 浏览器，但不适用于 Chrome。 

<!DOCTYPE html>
<html>
  <script language="JavaScript">
function showInput() {
    document.getElementById('display1').innerHTML = 
                document.getElementById('FRAC_MULTI').value;
}

function changeOptions(selectEl) {
  let selectedValue = selectEl.options[selectEl.selectedIndex].value;
  let subForms = document.getElementsByClassName('className')
  for (let i = 0; i < subForms.length; i += 1) {
    if (selectedValue === subForms[i].name) {
      subForms[i].setAttribute('style', 'display:block')
    } else {
      subForms[i].setAttribute('style', 'display:none') 
    }
  }
}

  </script>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

<h2>Av. Temp Recorder</h2>
Choose Temperature Gauge:
<select onchange="changeOptions(this)">
  <option value="" selected="selected">Select Option</option value="">
  <option value="form_1">Temp LVL 1</option>
  <option value="form_2">Temp LVL 2</option>
</select>

<form class="className" name="form_1" id="form_1" style="display:none">
LVL 1 Configuration Form
  <!---- THIS IS FORM 1---->
</form>

<form class="className" name="form_2" id="form_2" style="display:none">
LVL 2 Configuration Form<br>
  <!---- THIS IS FORM 2---->
Fractal Multiplier:<input name="name" size="50" value="500000" id="FRAC_MULTI">
</form>
<br><br><br>
  <input type="submit" onclick="showInput();"><br/>
  <label>User input: </label><br><br><pre>
{
    "FRAC_MULTI":"<span id="display1"></span>",
}
</pre>
</body>
</html>

当我选择第一个选项时，我看到了正确的文本，但在 Chrome 中选择第二个选项时，我看不到任何形式。在 Edge 中，我在选择选项 2 时看到表单，在选择选项 1 时看到 thext。

在 Chrome 中，如果我只在每个表单中使用文本（如上面的 form_1 所示），它就可以工作，因此表单被代码隐藏似乎是一个问题。

关于问题可能是什么的任何建议？

标签： javascripthtml

解决方案

情况如下：当您找到所有项目时，getElementsByClassName您将返回一个包含子项目的 HTMLCollection 列表。当您引用 时subForms[1].name，您会在 chrome 的情况下返回输入字段，而不是表单的 name 属性。如果您将输入字段的 name 属性重命名为 name2，您的脚本将起作用，或者您可以使用subForms[i].getAttribute('name')，然后您将取回该属性而不是某些东西。在边缘，为什么当你手动运行代码时，输​​入元素会被返回，但是当它运行代码时，它似乎做了一些魔术，它优先考虑属性值而不是元素。可能是因为它检测到您想要比较字符串而不是Element.

请注意：HTMLCollection 项目可以通过它们的名称、ID 或索引号来访问。

推荐阅读