如何通过 CSS 为每个 Select Option 赋予与 Option 相同的 Title 值？答案

【问题标题】：How can I give each Select Option a Title value which is the same the Option via CSS?如何通过 CSS 为每个 Select Option 赋予与 Option 相同的 Title 值？
【发布时间】：2015-11-29 15:11:40
【问题描述】：

如果 Option 太宽而无法放入 Select 元素中（并且由于“不动产”考虑，不想增加整个 Select 元素的宽度），我想添加一个“title”属性到每个元素，因此用户可以看到它的整体。

我可以通过更改以下选项在 HTML 中做到这一点：

<option value="1">1</option>

...到这个：

<option value="1" title="1">1</option>

...但是这太乏味了。 CSS 或 jQuery 中有没有办法将每个 Select 选项的值镜像为标题？

更新

我尝试了 Ivanka 的代码（确实可以在小提琴中使用），并将其放入 Meteor 客户端启动代码中：

if (Meteor.isClient) {
    Meteor.startup(function () {
      $("#select option").each(function(i, element) {
         $(element).attr('title', $(element).val());
      });
    });
});

...但是没有效果...???

更新 2

我也试过这个：

  Template.tblScheduler.onRendered(function () {
    $("#select option").each(function(i, element) {
       $(element).attr('title', $(element).val());
    });
  });

...但在 Mudville 仍然没有乐趣。

UDPATE 3

这行得通：

  Template.tblScheduler.onRendered(function () {
    $("select option").each(function(i, element) {
       $(element).attr('title', $(element).val());
    });
  });

（删除“#”以便选择所有选择，而不仅仅是以“select”作为 ID 的选择（没有一个选择）。

【问题讨论】：

标签： jquery css meteor

【解决方案1】：

使用 jQuery 是可能的：

$("select option").each(function(i, element) {
   $(element).attr('title', $(element).val());
});

将其包裹在document.ready 中，您就可以开始了！

这是一个演示：jsfiddle.net

【讨论】：

这在小提琴中有效，但我想我把它放在我的 Meteor .js 文件中的错误位置。
您确定要查找正确的元素吗？ #select 查找 ID 为 select 的元素。你选择的 id 是什么？
我想要所有的选择；他们的ID不同；我没有注意到哈希/磅。我会在没有它的情况下尝试它。