getElementsByClassName 显示来自选择框的未定义值答案

【问题标题】：getElementsByClassName shows undefined value from select boxgetElementsByClassName 显示来自选择框的未定义值
【发布时间】：2021-05-21 22:20:19
【问题描述】：

我的选项列表有以下 HTML 代码：

<p>Choose</p>
<select id="depo" value="depo" name="departs">
  <option value="IT"         name="departs" class="department">IT        </option>
  <option value="Literature" name="departs" class="department">Literature</option>
  <option value="Math"       name="departs" class="department">Math      </option>
  <option value="Biology"    name="departs" class="department">Biology   </option>
  <option value="Physics"    name="departs" class="department">Physics   </option>
</select>

<button class = "button" onclick="form_sub(); return false;">Submit</button>
<p id="show_results"></p>

这是 JS 代码：

function form_sub()
{
  var d_opt = document.getElementsByClassName("department");
  var choosen_dep;
  for(var x = 0; x<d_opt.length; x++)
  {    
    if(d_opt[x] == true)
    choosen_dep = d_opt[x].value;                 
  }
  document.getElementById("show_results").innerHTML="</br>" +choosen_dep+  "</br>";
}

每次我在选择框中选择任何选项时，代码中返回的值都是：undefined（在带有带有 show_results 函数的段落的字段中）。
每次我在选择框中选择任何选项时，代码中返回的值都是：undefined（在带有 show_results 函数的段落的框中）。
当我删除我的if(d_opt[x] == true) 时，返回的值始终等于选择框中的最后一个字段 - 即“物理”。

我不知道问题出在哪里 - 我尝试了这两种方法，但它们都没有返回我在表单中选择的内容。有谁知道可能出了什么问题？

【问题讨论】：

你的 HTML 无效 option 元素不能有 name 或 class 属性
那么我应该把class和name放在select元素中吗？
只是一个名字，选择的项目不能被样式化。所有表单元素的名称都是其父表单的属性
单选：document.querySelector('#depo option:checked') 多选：document.querySelectorAll('#depo option:checked')

标签： javascript html forms select getelementsbyclassname

【解决方案1】：

你的每一个d_opt[x] 值总是一个 HTMLOptionElement 对象，而不是一个布尔值。将它们与 true 进行比较是没有意义的。

要获得选中的选项，请阅读选择元素的value。

function form_sub() {

  var d_select = document.getElementById("depo");
  document.getElementById("show_results").innerHTML = "<br>" + d_select.value + "<br>";

}

<select id="depo" value="depo" name="departs">
  <option value="IT" name="departs" class="department">IT</option>
  <option value="Literature" name="departs" class="department">Literature</option>
  <option value="Math" name="departs" class="department">Math</option>
  <option value="Biology" name="departs" class="department">Biology</option>
  <option value="Physics" name="departs" class="department">Physics</option>
</select>

<button class="button" onclick="form_sub(); return false;">Submit</button>
<p id="show_results"></p>

另请注意，br 元素的 start 标记是强制性的，但 end 标记是禁止的。您正在尝试插入没有开始标签的结束标签。

【讨论】：

感谢您的评论。所以我不能在选择框中使用 getElementsByClassName 吗？因为我输出的值始终是“未定义的”，即使我以与您在回复中相同的方式编写它。
@MagicMan 你可能想提供一个minimal reproducible example。
@iota 我知道 getElementsById 是类似数组的对象，所以我需要一个循环来遍历所有元素。但我不知道如何提取所选选项并将其返回。我尝试了一切，但它要么返回未定义，要么只返回选择框中的最后一个元素 - 物理。如何获取选中的值？
@Quentic 你知道如何使用 getElementsByClassName 来做到这一点吗？

【解决方案2】：

这应该可以正常工作。将您的代码包含在表单标签中

<body>
        <p>Choose</p>
        <form name = "deps">
<select id="depo" name="departs">
  <option value="IT"        >IT        </option>
  <option value="Literature">Literature</option>
  <option value="Math"      >Math      </option>
  <option value="Biology"   >Biology   </option>
  <option value="Physics"   >Physics   </option>
</select>

<button class = "button" onclick="form_sub(); return false;">Submit</button>
<p id="show_results"></p>
        </form>

<script>
 function form_sub()
{
  var d_opt = document.deps.departs.value;                
  document.getElementById("show_results").innerHTML="</br>" +d_opt+  "</br>";
}
</script>
    </body>

【讨论】：

您的 HTML 无效选项元素不能有名称或类属性
运行代码 sn-p 它适用于他的要求
这个代码当然可以被浏览器接受，但这并不意味着这个HTML代码符合W3C标准，它仍然无效