创建两个相互依赖的 <select> 元素

Question

注意，此题绝对不是级联select。我知道该怎么做。请在标记为重复之前阅读，您会发现这不是级联，而是相互依赖。

我正在编写一个包含按年份过滤搜索结果的表单。为此，我使用了两个下拉框 (select)，id 分别为 "from" 和 "to"。应用程序的 "logic" 显然会要求 "to" 值 >= "from" 值。我希望这能反映在表示层中。也就是说，如果我在 "from" 下拉列表中 select 编辑了“1998”，那么我应该只允许在 "to" 下拉列表中 select 大于此值的选项，反之亦然.

我已经为此实现了一个最小示例，如下所示。如果用户选择 "from" 选项，然后选择 "to" 选项，然后继续，则此解决方案效果很好。但是，如果用户不断来回更改，那么问题就会开始出现。这样做的原因是，每当另一个 select 发生变化时，我都会为 select 重新设置所有选项的 HTML。但这也具有重置 "default" 的效果。

因此，例如，如果我在 "from" 中选择“3”（在下面的示例中），然后在 "to" 中选择“5”，然后返回并在中选择“2” "from"，"to" 框重置为“2”，即使“5”是一个有效的选择。

我的问题是，有没有比使用“.innerHTML”并重置整个选项列表更好的方法？或者如果它仍然有效，我是否必须手动将默认值恢复到原来的状态？

我希望这有点清楚。我是前端新手，抱歉。代码如下：

function updateTo(e) {
  var to = document.getElementById("to");
  update(to, e.value, 6);
}

function updateFrom(e) {
  var from = document.getElementById("from");
  update(from, 1, e.value);
}

function update(elmnt, beginValue, endValue) {
  selections = ""
  for (var i = beginValue; i <= endValue; i++) {
    selections += "<option>" + i.toString() + "</option>";
    elmnt.innerHTML = selections;
  }
}

<h3>FROM:</h3>
<select id="from" onchange="updateTo(this)">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</select>


<h3>TO:</h3>
<select id="to" onchange="updateFrom(this)">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</select>

Answer 1

试试这个片段 - 代码不言自明：

// re-write the options
const updateOptionElements = (elt, low, high, selected = null) => {
  elt.innerHTML = '';
  for (let i=low; i<high; i++) {
    let option = document.createElement('option');
    option.innerHTML = ''+i;
    if (i==selected) option.setAttribute('selected', 'true');
    elt.appendChild(option);
  }
}

// initialize DOM selectors and variables value bindings
const to = document.querySelector('#to');
const from = document.querySelector('#from');
let toSelected = 0;
let fromSelected = 9;

// initializes options
updateOptionElements(to, 0, 10, toSelected);
updateOptionElements(from, 0, 10, fromSelected);

// add change listeners to update the options upon change
to.onchange = evt => {
  toSelected = +evt.target.value;
  updateOptionElements(from, toSelected+1, 10, fromSelected);
}
from.onchange = evt => {
  fromSelected = +evt.target.value;
  updateOptionElements(to, 0, fromSelected, toSelected);
}

<select id="to"></select>
<select id="from"></select>

Answer 2

只需将先前 selected 的值设置为临时变量 (value) 并在 innerHTML

之后再次将其设置为 select

function updateTo(e) {
  var to = document.getElementById("to");
  var value = to.value;
  update(to, e.value, 6);
  to.value = value < e.value ? e.value : value;
}

function updateFrom(e) {
  var from = document.getElementById("from");
  var value = from.value;
  update(from, 1, e.value);
  from.value = value;
}

function update(elmnt, beginValue, endValue) {
  selections = ""
  for (var i = beginValue; i <= endValue; i++) {
    selections += "<option>" + i.toString() + "</option>";
  }
  elmnt.innerHTML = selections;
}

<h3>FROM:</h3>
<select id="from" onchange="updateTo(this)">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</select>


<h3>TO:</h3>
<select id="to" onchange="updateFrom(this)">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</select>

创建两个相互依赖的 <select> 元素

Creating two Co-dependant <select> elements

html

javascript

html-select