javascript - Onchange 显示 select 的数据属性不起作用

Question

我有一个选择元素，包含三个选项:

<select id="dimensions" onchange="showUpload(); setDimensions();">
    <option value="">Select dimension of the image</option>
    <option value="1" data-width="1600" data-height="1200">1600px x 1200px</option>
    <option value="2" data-width="600" data-height="400">600px x 400px</option>
</select>

现在，当我单击一个选项时，它会触发 2 个功能。第一个工作完美，但第二个应该提醒我数据属性。但事实并非如此。

这是我的功能:

function setDimensions() {

    var width = $(this).attr("data-width");
    var height = $(this).attr("data-height");

    alert(width);


    $('#width').val($('#width').val() + width);
    $('#height').val($('#height').val() + height);

}

我做错了什么？

编辑

我的showUpload函数:

function showUpload() {

    $(".upload-image").show();

}

作为插件:它警告:未定义。

我想，如果这显示错误，我应该回到小学......

Answer 1

this关键字指的是窗口对象。您可以直接从维度获取值。

function setDimensions() {
   var dimensions = $("#dimensions");
   var selectedIndex = dimensions.get(0).selectedIndex;
   var selectedOption = dimensions.find("option").eq(selectedIndex);
   var width = selectedOption .attr("data-width");
   var height = selectedOption .attr("data-height");

   alert(width);
}