两个动态选择框，两个选择框中都有数据属性，并依赖于它们。

Question

如何让动态选择框依赖于两者的数据属性值？

得到这段代码

超文本标记语言

<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当数据属性为非数字时，它可以工作，但存储在两个数据中的数据将是数字的。

这是对2个都有数据属性的动态选择框的最佳方法吗？

Answer 1

既然你用的是jQuery，那你不妨一直用下去。

为了使其一致，总是使用jQuery data() 方法。 data() 会一直尝试智能地将数据字段的值转换为另一种类型，如果它能确定数据字段是一个数字，或一个对象，或一个数组，或等等。 所以，你原来是在比较一个 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>