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

在setDimensions内，this将是您的选择元素，并且没有＆＃34;数据 - ＆＃34;属性。

您可以使用$('option:selected', this)

获取相关选项

完整的工作职能可以是：

function setDimensions() {
    var option = $('option:selected', this);
    var width = option.attr("data-width");
    var height = option.attr("data-height");

//  Could also use: option.data('width')

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

Answer 2

<强>已更新

使用jquery事件 on（更改），查看Worked Fiddle示例：

HTML：

<select id="dimensions">
    <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>

JS：

$('#dimensions').on('change',function() {
    showUpload(); 
    setDimensions($(this));
});

setDimensions = function(_this) {  
    var width = $(_this).find(':selected').data("width");
    var height = $(_this).find(':selected').data("height");

    alert('width='+width+' & height='+ height);

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

showUpload = function() {
}

Answer 3

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

Answer 4

如果showUpload（）函数抛出错误，则不会执行第二个函数。

Onchange显示select不工作的数据属性

4 个答案: