主页 / 问题 / 844756
Accepted
Semerkin
Asked:2020-06-21 16:12:55 +0800 CST2020-06-21 16:12:55 +0800 CST

链接两个选择时出错

  • 772

有两个列表，每个列表都有相同数量的选项。我的任务是确保选择一个列表的第 i 个元素并选择另一个列表的第 i 个元素。

这一切都很好，但是在鲁莽地点击这些列表后，我发现列表中的字段不再匹配。我爬进调试器并查看 DOM 树中的节点。我看到一切都按我的意愿工作（即 select 属性位于一个列表的第 i 个元素和另一个列表的相同元素上）。但是由于某种原因，在页面上没有观察到这种效果！！！

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>

javascript

1 个回答

  1. Best Answer

    关键是该属性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>

    • 1

相关问题