Как убедиться, что один выпадающий список всегда имеет значение ""

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

Более короткий способ сделать это (если у вас есть только эти 2 списка).

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>

Если у вас есть больше, с этим решением вам нужно будет найти всех братьев и сестер из выбранного списка

Answer 2

<select>

Изменения

• Обернуто <fieldset> вокруг обоих <select>s

• Зарегистрировано нажатиесобытие (также возможно изменение события) на <fieldset>, теперь любой щелчок на <select> вызовет функцию обратного вызова toggleSelect().Вы можете добавить дополнительные <select>s и по-прежнему работать с одним eventListener().Демо ниже имеет 6 <select>s.Этот метод называется Делегирование события .

• Собирает <select>s в NodeList, затем в массив, затем повторяет их с помощью forEach().В каждом цикле должен <select> , а не быть выбранным (e.target), а выбранный <select> имеет value,он будет иметь value из '', что заставит его выбрать <option>----</option>

---

Demo

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 = '';
      }
    });
  }
}

<fieldset>
  <select name="frt">
    <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>
  <select name="frt">
    <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>
  <select name="frt">
    <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>
</fieldset>

Answer 3

Функция равна 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 4

Вы можете достичь этого, используя следующую строку кода:

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 5

Вы можете изменить 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 6

Вы можете просто изменить выбранную опцию, используя атрибут 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>