Question

我正在尝试将动态信息添加到select元素中的选项。我想使用数据，因为它符合所有浏览器。我尝试使用alt并且确实显示在chrome中，但我不确定在选项元素上是否有alt标记。

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

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

Answer 1

alt（＆＃34;备用文字＆＃34;的缩写）仅适用于<img>元素且适用于可访问性原因。它是什么屏幕阅读器将大声朗读视障用户，它是在图像无法显示时代替图像显示的内容。

来自 MDN ：

alt

此属性定义描述图像的替代文本。如果图像URL错误，用户将看到此文本显示，   图像不是支持的格式之一，或者图像不是   尚未下载。

浏览器并不总是显示元素引用的图像。   这是非图形浏览器的情况（包括那些使用的浏览器）   如果用户选择不显示，则有视力障碍的人）   图像，或者如果浏览器无法显示图像，因为它是   无效或不受支持的类型。在这些情况下，浏览器可能会   将图像替换为此元素的alt中定义的文本   属性。出于这些原因和其他原因，您应该提供有用的信息   尽可能为alt值。

完全省略此属性表示图像是一个键   部分内容，没有文本等效内容。设置   此属性为空字符串（alt =＆＃34;＆＃34;）表示此图像   不是内容的关键部分，非可视浏览器可能   从渲染中省略它。

要为其添加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>

是否可以使用速记向选项添加数据？

2 个答案: