GetElementsByClassName无法按预期工作

Question

我的表格通常在屏幕上显示如下：

使用foreach循环显示多个房间。

现在我需要在第一个下拉框中选择一个值时禁用所有第二个下拉框，反之亦然。

其中一个下拉框的典型代码是

<select onchange="std()" class="numrooms" name="numrooms[4]">
<option value="" selected>Select</option>
<option value="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1</option>
<option value="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2</option>
</select>

我正在使用以下javascript：

function std() {
d = document.getElementsByClassNames("numrooms").value;
if (d>0) {
    document.getElementsByClassNames('numrooms_nr').disabled = true;
}else{
    document.getElementsByClassNames('numrooms_nr').disabled = false;
}
}
function nr() {
e = document.getElementsByClassNames("numrooms_nr").value;
if (e>0) {
    document.getElementsByClassNames('numrooms').disabled = true;
}else{
    document.getElementsByClassNames('numrooms').disabled = false;
}
}

但它不起作用。

我已经尝试将类更改为ID，然后在脚本中使用GetElementById（），这确实有效，但当然它只适用于一对下拉列表。我以为去上课并使用Get ElementsBy ClassName（）可以做到这一点，但显然不是。

我错过了一些明显的东西吗？或者完全错了？

EDIT 正如大家所指出的那样，我在问题中写了“getElementsByClass”应该是“getElementsByClassName”。然而，当我写这个问题而不是我的实际代码时，这是一个错误。我现在在这里纠正了它。

EDIT2 我到了那里，但尚未完全整理。我已经采纳了@Notulysses建议，所以出于测试目的，我的脚本是

function std() {
d = document.getElementsByClassName('numrooms')[1].value;
if (d>0) {
var n = document.getElementsByClassName('numrooms_nr')
for(var i=0;i<n.length;i++){
   n[i].disabled = true;
}
}else{
var n = document.getElementsByClassName('numrooms_nr')
for(var i=0;i<n.length;i++){
   n[i].disabled = false;
}
}
}
function nr() {
e = document.getElementsByClassName('numrooms_nr')[0].value;
if (e>0) {
var n = document.getElementsByClassName('numrooms')
for(var i=0;i<n.length;i++){
   n[i].disabled = true;
}
}else{
var n = document.getElementsByClassName('numrooms')
for(var i=0;i<n.length;i++){
   n[i].disabled = false;
}
}
}

当选择第二个房间的第一个下拉列表时，

function（std）现在禁用所有第二个下拉框（因为我已将其设置为1）。类似地，function（nr）禁用所有第一个下拉框（因为我已将其设置为[0]）。 但是，当选择任何第一个下拉列表时，如何禁用所有第二个下拉列表？

Answer 1

您正在使用 getElementsByClass （它不存在）并更改整个集合的属性（无效，您应该遍历Node列表以更改属性的值）。你应该这样做：

var n = document.getElementsByClassName('numrooms')
for(var i=0;i<n.length;i++){
   n[i].disabled = true;
}

Answer 2

它的GetElementsByClassName不是GetElementsByClass，它会返回NodeList个节点，所以如果你想改变任何属性，你需要使用索引，即循环：

document.getElementsByClassName('numrooms_nr')[0].disabled = true;

这是您的完整代码：

var d = document.getElementsByClassNames("numrooms");
for(var i=d.length-1;i>=0; i--){
  if(n[i].value > 0){
    n[i].disabled = true;
  }
  else{
    n[i].disabled = false;
  }
}

Answer 3

你错了。它不是getElementsByClass，而是getElementsByClassName。它返回HTMLCollection找到的元素。要访问任何元素，您应该使用indexing。

document.getElementsByClassName('someclass')[0] <- index

请参阅链接了解更多详情 - ＆gt; Link

Answer 4

getElementsByClassName和getElementsByTagName不返回单个元素，例如get ElementById。相反，它们返回一个包含该类的所有元素的数组。随着时间的推移，这已经绊倒了许多Javascripters。另请注意，getElementsByClassName在IE早期版本中无法工作（惊喜！）

因此，在写入getElementsByClassName之后，您将缺少[0]或[1]或[2]等位，例如：

document.getElementsByClassName("numrooms")[0]

将引用具有该类名的第一个。