Два окна выбора Dynami c с атрибутом данных в обоих и зависимых от них

Question

Как получить динамический c поля выбора в зависимости от значения атрибутов данных в обоих?

Получил этот код

HTML

<select id="hours" onchange="giveSelection()">
  <option value="somethingA" data-option="1">optionA</option>
  <option value="somethingB" data-option="2">optionB</option>
</select>
<select id="paxno">
  <option data-option="1">optionC</option>
  <option data-option="1">optionD</option>
  <option data-option="2">optionE</option>
  <option data-option="1">optionF</option>
</select>

JS

var sel1 = document.querySelector('#hours');
var sel2 = document.querySelector('#paxno');
var options2 = sel2.querySelectorAll('option');

function giveSelection() {
  sel2.innerHTML = '';
  for(var i = 0; i < options2.length; i++) {
    if(options2[i].dataset.option === $("#hours").find(":selected").data("option")) {
      sel2.appendChild(options2[i]);
    }
  }
}

Я пытался сделать это из примера, приведенного по этому вопросу на Stackoverflow , и он работает, когда атрибут данных не числовой c, но данные сохраненные в обоих будут числами c.

Есть мысли, что я здесь делаю не так? это лучший подход к 2 динамическим c полям выбора с обоими атрибутами данных?

Answer 1

Поскольку вы используете jQuery, вы можете использовать его полностью.

Чтобы сделать его согласованным, всегда используйте метод jQuery data(). data() всегда будет пытаться разумно преобразовать значение поля данных в другой тип, если он может определить, что это число, или объект, или массив, или et c. Итак, ваш оригинал сравнивал dataset.option с data(), используя ===, который удаляет приведение типов. Так что ничто не будет равным.

var sel1 = $('#hours');
var sel2 = $('#paxno');
var options2 = sel2.find('option');

function giveSelection() {
  var target = sel1.find(':selected').data('option');
  
  sel2.empty().append(
    options2.filter(function(){
      return $(this).data('option') === target;
    })
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="hours" onchange="giveSelection()">
  <option value="somethingA" data-option="1">optionA</option>
  <option value="somethingB" data-option="2">optionB</option>
</select>
<select id="paxno">
  <option data-option="1">optionC</option>
  <option data-option="1">optionD</option>
  <option data-option="2">optionE</option>
  <option data-option="1">optionF</option>
</select>