Создание двух зависимых <select>элементов

Question

Примечание. Этот вопрос определенно не касается каскадного выбора . Это я умею делать. Пожалуйста, прочитайте, прежде чем отмечать как дубликат, вы увидите, что это не каскад, это взаимозависимость.

Я пишу форму, которая включает в себя фильтрацию результатов поиска по годам. Я использовал два выпадающих (выберите) поля для этого с идентификаторами «от» и «до». «Логика» приложения, очевидно, потребует, чтобы значение «to» было> = значением «from». Я хотел бы, чтобы это было отражено на уровне представления. А именно, если я выбрал «1998» в раскрывающемся списке «из», то мне будет разрешено выбирать только те варианты, которые больше, чем в раскрывающемся списке «до», и наоборот .

Я реализовал минимальный пример для этого, который показан ниже. Это решение хорошо работает, если пользователь выбирает опцию «от», затем опцию «до» и затем переходит. Тем не менее, если пользователь продолжит переходить туда-сюда, проблемы начнут появляться. Причина этого в том, что я переустанавливаю HTML всех опций для выбора, когда другой выбор изменяется. Но это также приводит к сбросу «по умолчанию».

Так, например, если я выберу «3» в «from» (в примере ниже), затем выберу «5» в «to», а затем вернусь и выберу «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

просто установите ранее выбранное значение в переменную температуры (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>

Answer 2

Попробуйте этот фрагмент - код говорит сам за себя:

// 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>