從不同的選擇獲取數據* * onchange

Question

試圖將data- *屬性的值發送給函數。

我有兩個不同的選擇，我想將所選選項的data-addr值發送給函數，並將其顯示在#results div中。

我能夠使用下面的腳本使其與一個選擇一起工作，但我希望我的腳本可以使用多個選擇並用最後選擇的選項的data-addr值替換。

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>