javascript - select的onchange show数据属性不起作用

我有一个选择元素，具有三个选项：

<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();

}

作为插件：它发出警报：未定义。

想想这是否显示错误，我应该回到小学...

最佳答案

此关键字引用窗口对象。
您可以直接从尺寸中获取值。

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);
}