两个动态 select 框，两者都具有数据属性并依赖于它们

Question

如何根据两者的数据属性值获取动态 select 框？

得到这个代码

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]);
    }
  }
}

我一直在尝试根据 Whosebug 上这个问题给出的示例来执行此操作，并且当数据属性不是数字但存储在两者中的数据都是数字时它可以工作。

有没有想过我做错了什么？这是 2 个具有数据属性的动态 select 框的最佳方法吗？

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>

两个动态 select 框，两者都具有数据属性并依赖于它们

Two dynamic select boxes with data attribute in both and dependant on them

html

javascript

jquery

select

custom-data-attribute