Ошибка в связи двух select

189

27 июля 2018, 13:50

Есть два списка и в каждом одинаковое количество option. Моя задача сделать так, чтобы на выбор и-того элемент одного списка выбирался и-тый элемент другого списка.

Всё это работает хорошо, но после безудержного щёлканья по этим спискам, я обнаруживаю, что поля в списках уже не соответствуют друг другу. Я лезу в дебагер и смотрю узлы в ДОМ дереве. Вижу что всё работает так как я хочу (т.е. атрибут селект стоит у и-того элемента одного и и-того элемента другого списка). Но на страничке почему то этот эффект не наблюдается!!!

window.library = {}; 
window.library.selectElement = function(element) { 
  element.setAttribute('selected', 'selected'); 
}; 
window.library.disselectElement = function(element) { 
  element.removeAttribute('selected'); 
}; 
window.library.addListenerTo = function(cssSelector, eventName, eventListener) { 
  document.querySelector(cssSelector).addEventListener(eventName, eventListener); 
}; 
 
var onTimeChanged = function(evt) { 
  evt.preventDefault(); 
  evt.stopPropagation(); 
  changeTime(evt.target.value); 
}; 
var changeTime = function(nextTimeValue) { 
  changeTimeIn(nextTimeValue); 
  changeTimeOut(nextTimeValue); 
}; 
var changeTimeIn = function(nextTimeValue) { 
  var elementTimeout = document.querySelector('#timein'); 
  window.library.disselectElement(elementTimeout.querySelector('[selected]')); 
  window.library.selectElement(elementTimeout.querySelector('[value="' + nextTimeValue + '"]')); 
}; 
var changeTimeOut = function(nextTimeValue) { 
  var elementTimeout = document.querySelector('#timeout'); 
  window.library.disselectElement(elementTimeout.querySelector('[selected]')); 
  window.library.selectElement(elementTimeout.querySelector('[value="' + nextTimeValue + '"]')); 
}; 
 
window.library.addListenerTo('#timein', 'change', onTimeChanged); 
window.library.addListenerTo('#timeout', 'change', onTimeChanged);

<fieldset class="ad-form__element ad-form__element--time"> 
  <label class="ad-form__label" for="timein">Время заезда и выезда</label> 
  <select id="timein" name="timein"> 
    <option value="12:00" selected>После 12</option> 
    <option value="13:00">После 13</option> 
    <option value="14:00">После 14</option> 
  </select> 
  <select id="timeout" name="timeout" title="Time to go out"> 
    <option value="12:00" selected>Выезд до 12</option> 
    <option value="13:00">Выезд до 13</option> 
    <option value="14:00">Выезд до 14</option> 
  </select> 
</fieldset>

Answer 1

Дело в том, что атрибут selected задает начальный выбранный элемент.

If present, this Boolean attribute indicates that the option is initially selected.

Соответственно, лучше управлять текущим значением через свойство value у элемента <select>.

Пример:

window.library = {}; 
window.library.addListenerTo = function(cssSelector, eventName, eventListener) { 
  document.querySelector(cssSelector).addEventListener(eventName, eventListener); 
}; 
 
var onTimeChanged = function(evt) { 
  changeTimeOut(evt.target.value); 
  changeTimeIn(evt.target.value); 
}; 
 
var changeTimeIn = function(nextTimeValue) { 
  var elementTimeout = document.querySelector('#timein'); 
  elementTimeout.value = nextTimeValue; 
}; 
var changeTimeOut = function(nextTimeValue) { 
  var elementTimeout = document.querySelector('#timeout'); 
  elementTimeout.value = nextTimeValue; 
}; 
 
window.library.addListenerTo('#timein', 'change', onTimeChanged); 
window.library.addListenerTo('#timeout', 'change', onTimeChanged);

<fieldset class="ad-form__element ad-form__element--time"> 
  <label class="ad-form__label" for="timein">Время заезда и выезда</label> 
  <select id="timein" name="timein"> 
    <option value="12:00" selected>После 12</option> 
    <option value="13:00">После 13</option> 
    <option value="14:00">После 14</option> 
  </select> 
  <select id="timeout" name="timeout" title="Time to go out"> 
    <option value="12:00" selected>Выезд до 12</option> 
    <option value="13:00">Выезд до 13</option> 
    <option value="14:00">Выезд до 14</option> 
  </select> 
</fieldset>