Question

注意，这个问题绝对不是关于级联选择的。我知道该怎么办。请在标记为重复之前阅读，您会发现这不是级联，而是相互依赖的。我正在写一张表格，其中包括按年份过滤搜索结果。我为此使用了两个下拉（选择）框，其ID为“从”和“至”。应用程序的“逻辑”显然将要求“ to”值大于等于“ from”值。我希望这可以反映在表示层中。即，如果我在“自”（From）下拉列表中选择了“ 1998”，则只允许我在“至”（To）下拉列表中选择大于此的选项，反之亦然。我已经实现了一个最小的示例，如下所示。如果用户选择“从”选项，然后选择“至”选项，然后继续前进，则此解决方案效果很好。但是，如果用户不断来回更改，则会开始出现问题。这样做的原因是，每当另一个选择更改时，我都会重新设置一个选择的所有选项的HTML。但这具有重置“默认”的作用。因此，例如，如果我在“ from”中选择“ 3”（在下面的示例中），然后在“ to”中选择“ 5”，然后返回并在“ from”中选择“ 2”，则“ to”框重置为“ 2”，即使“ 5”是一个有效的选择。我的问题是，有没有比使用“ .innerHTML”并重置整个选项列表更好的方法了？还是仅需手动将默认设置恢复为原来的状态即可？我希望这一点很清楚。抱歉，是前端的新功能。代码如下：函数updateTo（e）{ var to = document.getElementById（“ to”）; update（to，e.value，6）; } 函数updateFrom（e）{ var from = document.getElementById（“ from”）; update（from，1，e.value）; } 函数update（elmnt，beginValue，endValue）{ 选择=“” for（var i = beginValue; i <= endValue; i ++）{ 选择+ =“ ”; elmnt.innerHTML =选择； } }

从：

收件人：

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

只需将先前选择的值设置为临时变量（value），然后将其再次设置为innerHTML之后的选择值

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>元素

从：

收件人：

2 个答案: