Javascript 如何确保一个下拉列表的值始终为“0”&引用；

我有两个下拉列表。但是，我试图确保如果用户从水果菜单中选择一种水果，那么蔬菜菜单就是

--

。如果用户从蔬菜菜单中选择一种蔬菜，则水果菜单为

--

。所以不管怎样，至少有一个下拉列表是

--

函数事件处理程序（）{
var list=document.getElementByName（'fruit'）[0]；
Lists.addEventListener（'change'，reset_菜单，false）；
}
功能复位菜单（）{
警报（“测试”）；
}
window.onload=事件处理程序

---
芒果
苹果
香蕉
---
胡萝卜
莴苣
甘蓝
您只需使用选择框的
值
属性更改所选选项：


函数事件处理程序（）{
var list=document.getElementsByName（'fruit'）[0]；
Lists.addEventListener（'change'，reset_菜单，false）；
Lists=document.getElementsByName（'veg'）[0]；
Lists.addEventListener（'change'，reset_菜单，false）；
}
功能复位菜单（）{
var other=this.name==‘水果’？‘蔬菜’：‘水果’；
document.getElementsByName（其他）[0]。值=“”；
}
window.onload=事件处理程序

---
芒果
苹果
香蕉
---
胡萝卜
莴苣
甘蓝
您可以更改另一个选择的
selectedIndex
。像这样：


函数main（）{
var fruit=document.getElementById（'fruit'），
veg=document.getElementById（'veg'）；
fruit.addEventListener（'change'，e=>{
如果（fruit.selectedIndex！=0）
veg.selectedIndex=0；
}，假）；
veg.addEventListener（'change'，e=>{
如果（veg.selectedIndex！=0）
水果。选择指数=0；
}，假）；
}
window.onload=main

---
芒果
苹果
香蕉
---
胡萝卜
莴苣
甘蓝
您可以通过使用以下代码行来实现这一点：

list.value = list.options[0].value;

这会将下拉列表/选择列表设置为
列表
是ie（
--
）的任何内容的最大值。因此，当您更改水果列表时，可以将
list
设置为您的
veg
列表，以便它更改该下拉列表

现在，当您调用
reset\u菜单
功能时，您可以通过要重置的列表的列表名。您的事件处理程序会管理此事件，以便您可以定义在这些事件中传递的列表名称

请参阅下面的工作示例（以及代码注释以获取进一步解释）：


功能页_加载（）{
var fruitList=document.getElementsByName（'fruit'）[0]；
export list.addEventListener（'change'，function（）{reset_menu（“veg”）}）；//更改水果列表时，调用reset_menu函数重置“veg”菜单
var vegList=document.getElementsByName（'veg'）[0]；
vegList.addEventListener（'change'，function（）{reset_menu（“fruit”）}）//当蔬菜列表更改时，调用reset_menu函数重置“veg”菜单
}
功能重置菜单（列表名称）{
var list=document.getElementsByName（listName）[0]；//使用传递的名称重置下拉列表
list.value=list.options[0]。值；
}
window.onload=页面加载

---
芒果
苹果
香蕉
---
胡萝卜
莴苣
甘蓝
函数是
getElementsByName
，它返回
NodeList
。使用
索引
从
节点列表
获取
项
如下

 document.getElementsByName('fruits').item(0) // this will get you fruits element

试试这个


var fruits=document.getElementsByName（'fruit'）。项（0）；
var vegs=document.getElementsByName（'veg'）。项（0）；
结果.addEventListener（'change'，（e）=>{
vegs.value=e.target.value.length？“：vegs.value；
});
vegs.addEventListener（'change'，（e）=>{
fruits.value=e.target.value.length？“：fruits.value；
});

---
芒果
苹果
香蕉
---
胡萝卜
莴苣
甘蓝

变化

将一个
包裹在两个
s


已将单击事件（也可以更改事件）注册到
，现在任何对
的单击都将触发回调函数
toggleSelect（）
。您可以添加额外的
s
，并且仍然使用单个
eventListener（）
运行。下面的演示有6个
s
。此方法称为


将
s
收集到一个节点列表中，然后是一个数组，然后使用
forEach（）
对它们进行迭代。在每个循环中，如果
不是所选的（），并且所选的
具有
值
，则它将具有
值
，从而强制它选择
-




演示

var set=document.querySelector（'fieldset'）；
set.addEventListener（“单击”，切换选择）；
功能切换选择（e）{
var sel=Array.from（document.querySelectorAll（'select'）；
var tgt=e.target；
如果（tgt.tagName=='SELECT'）{
sel.forEach（功能（obj、idx）{
if（obj！==tgt&&tgt.value！==''）{
obj.value=''；
}
});
}
}

---
芒果
苹果
香蕉
---
胡萝卜
莴苣
甘蓝
---
芒果
苹果
香蕉
---
胡萝卜
莴苣
甘蓝
---
芒果
苹果
香蕉
---
胡萝卜
莴苣
甘蓝
这是一种较短的方法（如果您只有这两个列表）


const list=document.querySelectorAll（'select'）；
lists.forEach（（list，i）=>{
list.onchange=函数（）{
const resetList=i==0？list.nextElementSibling:list.previousElementSibling；
resetList.selectedIndex=null；
}
})

---
芒果
苹果
香蕉
---
胡萝卜
莴苣
甘蓝
如果选择的下拉值为空，则不应使其他值无效。尽管如此，您的解决方案是非常通用和正确的，没有任何硬编码值。