javascript - 从不同的选择中获取数据-*

Question

尝试将 data-* 属性的值发送给函数。

我有两个不同的选择，我想将所选选项的数据地址值发送到函数并将其显示在#results div 中。

我能够使用以下脚本使其与一个选择一起工作，但我希望我的脚本与多个选择一起工作并替换为最后一个选择选项的数据地址值。

var test = $('#thefirstselect option:selected').data('addr');
$('#result').text(test);

这是html

<div>
  <select class="form-control" id="thefirstselect" onchange="setaddress();">
    <option value="" data-addr="001">one</option>
    <option value="" data-addr="002">two</option>
    <option value="" data-addr="003">three</option>
  </select>
</div>

<div>
  <select class="form-control" id="thesecondselect" onchange="setaddress();">
    <option value="" data-addr="004">four</option>
    <option value="" data-addr="005">five</option>
    <option value="" data-addr="006">six</option>
  </select>
</div>

https://codepen.io/carlos27/pen/brQBGE

Answer 1

使用$(this) 来引用被更改的选择，使用option:selected 来选择被选择的选项。还要避免内联 JavaScript:

$('#thefirstselect, #thesecondselect').change(function() {
  var test = $(this).find('option:selected').data('addr');
  console.log(test);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select class="form-control" id="thefirstselect">
    <option value="" data-addr="001">one</option>
    <option value="" data-addr="002">two</option>
    <option value="" data-addr="003">three</option>
  </select>
</div>

<div>
  <select class="form-control" id="thesecondselect">
    <option value="" data-addr="004">four</option>
    <option value="" data-addr="005">five</option>
    <option value="" data-addr="006">six</option>
  </select>
</div>