如何将 select 选项中的数据目标属性应用于按钮？

Question

How can I grab the data-target attribute from the options and apply that data-target as a data-target to the button after the selection is made?

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

Replace second line with var prop = $("#selectID option:selected").data("target");.

SIDE NOTE: It's a good practice to have a default option with value 0 (or default). So the option1 is not selected automatically.

 $("#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>

Answer 2

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

With this you are selecting #selectID reference.

Try this:

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

});