getElementsByClassName 显示 select 框中的未定义值

Question

我的选项列表 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>";
}

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

我不知道问题出在哪里 - 我尝试了这两种方法，但都没有 returns 我在表格中 select 编辑的内容。有谁知道哪里出了问题？

Answer 1

您的每个 d_opt[x] 值都将始终是一个 HTMLOptionElement 对象，而不是布尔值。将它们与 true.

进行比较毫无意义

要获得 selected 选项，请阅读 select 元素的 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 标签。您正在尝试插入没有开始标记的结束标记。

Answer 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>

getElementsByClassName 显示 select 框中的未定义值

getElementsByClassName shows undefined value from select box

html

javascript

forms

select

getelementsbyclassname