0

Есть два списка и в каждом одинаковое количество 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>

8
  • А что за объект такой у вас window.library? Может, в нем проблема? 21 июн 2018 в 8:20
  • Нет, с ним всё хорошо. Это библиотека из которой я беру функции для установки/снятия атрибута селект. Она правильно отрабатывает - смотрю по дом дереву
    – Semerkin
    21 июн 2018 в 8:25
  • Приведите код библиотеки в вопросе, что бы мы могли запустить и проверить. Сейчас ваш код в вопросе не несет никакой полезной функции для понимания, что не работает. 21 июн 2018 в 8:59
  • Дополнил кодом внизу вопроса
    – Semerkin
    21 июн 2018 в 9:02
  • Это замечательно, что вы дополнили вопрос! К сожалению, все еще запустить ваш пример не получается. Думаю, вы сами догадываетесь, почему) 21 июн 2018 в 9:29

1 ответ 1

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.