`<select>`

Question

我有2个下拉菜单。但是，我试图确保如果用户从水果菜单中选择了水果，则蔬菜菜单为---。如果用户从蔬菜菜单中选择蔬菜，则水果菜单为---。因此，无论如何，至少有一个下拉列表为---。

function event_handler() {
  var Lists = document.getElementByName('fruit')[0];
  Lists.addEventListener('change', reset_menu, false);
}

function reset_menu() {
  alert('test');
}
window.onload = event_handler;

<select name="fruit">
  <option value="" selected="selected">---</option>
  <option value="mango">Mango</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>
<select name="veg">
  <option value="" selected="selected">---</option>
  <option value="carrot">Carrot</option>
  <option value="lettuce">Lettuce</option>
  <option value="cabbage">Cabbage</option>
</select>

我在听菜单时遇到麻烦。我已经看到了一些附加在选项后面的代码，但这不是我想要的。

Answer 1

您可以通过使用以下代码行来实现：

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

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

现在，当您调用reset_menu函数时，可以通过一个列表名称来传递您想重置的列表。您的事件处理程序可以对此进行管理，因此您可以定义在其中传递的列表名称。

请参见下面的工作示例（以及代码注释以获取更多说明）：

function page_load() {
  var fruitList = document.getElementsByName('fruit')[0];
  fruitList.addEventListener('change', function() {reset_menu("veg")}); // when the fruit list is changed call the reset_menu function to reset the "veg" menu
  
  var vegList = document.getElementsByName('veg')[0];
  vegList.addEventListener('change', function() {reset_menu("fruit")}); // when the vegetable list is changed call the reset_menu function to reset the "veg" menu
}

function reset_menu(listName) {
    var list = document.getElementsByName(listName)[0]; // reset the dropdown list with the name passed through
    list.value = list.options[0].value;
}

window.onload = page_load;

<select name="fruit">
  <option value="" selected="selected">---</option>
  <option value="mango">Mango</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>
<select name="veg">
  <option value="" selected="selected">---</option>
  <option value="carrot">Carrot</option>
  <option value="lettuce">Lettuce</option>
  <option value="cabbage">Cabbage</option>
</select>

Answer 2

您只需使用选择框的value属性即可更改所选选项：

function event_handler() {
  var Lists = document.getElementsByName('fruit')[0];
  Lists.addEventListener('change', reset_menu, false);

  Lists = document.getElementsByName('veg')[0];
  Lists.addEventListener('change', reset_menu, false);
}

function reset_menu() {
  var other = this.name === 'fruit' ? 'veg' : 'fruit';
  document.getElementsByName(other)[0].value = '';
}
window.onload = event_handler;

<select name="fruit">
  <option value="" selected="selected">---</option>
  <option value="mango">Mango</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>
<select name="veg">
  <option value="" selected="selected">---</option>
  <option value="carrot">Carrot</option>
  <option value="lettuce">Lettuce</option>
  <option value="cabbage">Cabbage</option>
</select>

Answer 3

您可以更改其他选择的selectedIndex。像这样：

function main() {
  var fruit = document.getElementById('fruit'),
  veg = document.getElementById('veg');
  fruit.addEventListener('change', e => {
    if(fruit.selectedIndex != 0)
      veg.selectedIndex = 0;
  }, false);
  veg.addEventListener('change', e => {
    if(veg.selectedIndex != 0)
     fruit.selectedIndex = 0;
  }, false);
  
}
window.onload = main;

<select id="fruit">
  <option value="" selected="selected">---</option>
  <option value="mango">Mango</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>
<select id="veg">
  <option value="" selected="selected">---</option>
  <option value="carrot">Carrot</option>
  <option value="lettuce">Lettuce</option>
  <option value="cabbage">Cabbage</option>
</select>

Answer 4

函数为getElementsByName，它返回NodeList。如下使用item从NodeList获取index

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

尝试

var fruits = document.getElementsByName('fruit').item(0);
var vegs = document.getElementsByName('veg').item(0);

fruits.addEventListener('change', (e) => {  
  vegs.value = e.target.value.length ? "" : vegs.value;
});
vegs.addEventListener('change', (e) => {
  fruits.value = e.target.value.length ? "" :fruits.value;
});

<select name="fruit">
    <option value="" selected="selected">---</option>
    <option value="mango">Mango</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
</select>
<select name="veg">
    <option value="" selected="selected">---</option>
    <option value="carrot" >Carrot</option>
    <option value="lettuce" >Lettuce</option>
    <option value="cabbage" >Cabbage</option>
</select>

Answer 5

`<select>`

更改

在两个<fieldset>

<select>s

将点击事件（也可能发生更改事件）注册到<fieldset>，现在对<select>的任何点击都会触发回调函数toggleSelect()。您可以添加其他<select>s，并且仍然可以使用单个eventListener()运行。下面的演示有6 <select>s。此方法称为Event Delegation。
将<select>s收集到一个NodeList中，然后收集一个数组，然后使用forEach()遍历它们。在每个循环中，<select> 不是应该是选定的（e.target），并且选定的<select>具有{{ 1}}，它将有一个value的“”，从而迫使它选择value

演示

<option>----</option>

var set = document.querySelector('fieldset');

set.addEventListener('click', toggleSelect);

function toggleSelect(e) {
  var sel = Array.from(document.querySelectorAll('select'));
  var tgt = e.target;
  if (tgt.tagName === 'SELECT') {
    sel.forEach(function(obj, idx) {
      if (obj !== tgt && tgt.value !== '') {
        obj.value = '';
      }
    });
  }
}

Answer 6

一种较短的方法（如果只有这两个列表）。

const lists = document.querySelectorAll('select');
lists.forEach((list,i) => {
	list.onchange = function() {
  	const resetList = i === 0 ? list.nextElementSibling : list.previousElementSibling;
  	resetList.selectedIndex = null;
  }
})

<select name="fruit">
    <option value="" selected="selected">---</option>
    <option value="mango">Mango</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
</select>
<select name="veg">
    <option value="" selected="selected">---</option>
    <option value="carrot" >Carrot</option>
    <option value="lettuce" >Lettuce</option>
    <option value="cabbage" >Cabbage</option>
</select>

如果您还有更多，使用此解决方案，您将必须找到所选列表的所有同级兄弟

如何确保一个下拉菜单始终具有“”值

6 个答案:

`<select>`

更改

演示