Question

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

我有两个不同的选择，我想将所选选项的data-addr值发送到该函数，并将其显示在#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>

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

1 个答案: