如何将 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

用var prop = $("#selectID option:selected").data("target");替换第二行 .

旁注：最好使用值为 0（或默认值）的默认选项。 所以 option1 不会自动选择。

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

有了this ，您正在选择#selectID 参考。

尝试这个：

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

});