Как применить атрибут data-target из опции select к кнопке?

Question

Как я могу извлечь атрибут цели данных из опций и применить эту цель данных в качестве цели данных к кнопке после выбора?

HTML:

<div>
<select id="selectID">
                <option value="option1" data-target="data1">Select</option>
                <option value="option1" data-target="data1">Select</option>
            </select>
            <button id="selBtn" data-target="">Button</button>
</div>

Javascript:

 $("#selectID").change(function () {
                            var prop = $(this).data("data-target");
                            $("#selBtn").attr("data-target", prop);
                        });

Answer 1

$(this).data("data-target")

С помощью this вы выбираете #selectID reference.

Попробуйте это:

 $("#selectID").change(function() {
  console.log($(this).find(':selected').data('target'));

});

Answer 2

Заменить вторую строку на var prop = $("#selectID option:selected").data("target");.

СТОРОННОЕ ПРИМЕЧАНИЕ: Рекомендуется использовать параметр по умолчанию со значением 0 (или по умолчанию). Таким образом, опция 1 не выбирается автоматически.

$("#selectID").change(function () {
  var prop = $("#selectID option:selected").data("target");
  $("#selBtn").attr("data-target", prop);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select id="selectID">
    <option value="0" data-target="data1">Please Select</option>
    <option value="option1" data-target="data1">Select 1</option>
    <option value="option2" data-target="data2">Select 2</option>
</select>
<button id="selBtn" data-target="">Button</button>
</div>