如何使用jQuery为select中的每个项添加数据属性

Question

我正在尝试创建一个选择下拉列表，在更改时，会获取该选项的“data-bg”属性值，并将其应用为正文背景。

但是背景图片网址来自php脚本中的某个地方。

所以我需要做的是，使用php数组的背景图片网址，并使用for循环，创建一个jquery函数，将图片网址作为数据属性添加到选择输入中的每个选项。

一件事是列表中的第一个选项是空白，所以我也需要一个偏移。

我可以使用什么jquery函数来遍历选项中的选项以应用data-attr，因此我可以绑定一个on更改来更改背景图像。

如果您需要任何澄清，请告诉我。

Answer 1

使用jquery的each()函数和选项元素的选择器。

$('[name=options]').each(function(index, element) {
    $(element).attr('data-bg', value);
});

Answer 2

查看我的SUPER DEMO HERE

我相信这就是你想要的。 使用jQuery.each()和onchange()功能

Answer 3

在jquery中使用每个函数

[在此处输入链接描述] [1]

 [Chek the demo here]: http://jsfiddle.net/5aRvF/53/

Answer 4

我假设$arr是一个包含URL的PHP​​数组，您可以直接在脚本中包含PHP（可能需要服务器配置，但更容易在HTML文档中内联编写此代码）。我还假设select的id为“my_select”。

var arr = <?php echo json_encode($arr); ?>
$("#my_select option").each(function (i, opt) {
    $(opt).attr("data-bg", arr[i]);
});