是否可以使用 shorthand 将数据添加到选项？

Question

我正在尝试将动态信息添加到 select 元素中的选项。我想使用数据，因为它与所有浏览器兼容。我尝试使用 alt，它确实出现在 chrome 中，但我不确定在选项元素上使用 alt 标签是否合适。

jQuery(el).append($('<option>', {
    value: index,
    text: column_persistence[index],
    alt: check_box_id
}));

如何使用附加 jQuery 方法动态添加数据属性？

Answer 1

alt（"alternate text" 的缩写）仅适用于 <img> 元素并且出于可访问性原因而使用。它是屏幕阅读器将向视障用户大声朗读的内容，也是当无法显示图像时将代替图像显示的内容。

来自MDN:

alt

This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.

Browsers do not always display the image referenced by the element. This is the case for non-graphical browsers (including those used by people with vision impairments), if the user chooses not to display images, or if the browser cannot display the image because it is invalid or an unsupported type. In these cases, the browser may replace the image with the text defined in this element's alt attribute. You should, for these reasons and others, provide a useful value for alt whenever possible.

Omitting this attribute altogether indicates that the image is a key part of the content, and no textual equivalent is available. Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.

要为其添加 data 属性和数据，只需访问 .data() 方法并传递 -name 和属性值：

$( "body" ).data( "foo", 52 );

使用 .append() 方法，您几乎可以像设置任何其他方法一样设置属性，但请务必将整个属性括在引号中。它看起来像这样：

jQuery(el).append($('<option>', {
    value: index,
    text: column_persistence[index],
    "data-Name": theValue
});

有关文档，请参阅 this。

Answer 2

三种方法：

$(el).append($('<option>', {
    value: index,
    text: column_persistence[index],
    "data-alt": check_box_id
}));

或者：

$(el).append($('<option>', {
    value: index,
    text: column_persistence[index]
}).data("alt", check_box_id));

或者：

$(el).append($('<option>', {
    value: index,
    text: column_persistence[index]
}).attr("data-alt", check_box_id));

这些应该导致 HTML 元素：

<option value="1" data-alt="chbk-1">Column Name</option>

是否可以使用 shorthand 将数据添加到选项？

Is it possible to add data to option using shorthand?

javascript

jquery

html-select

append