使用 .append() 动态添加标题属性以选择选项答案

【问题标题】：Adding title attribute to select option dynamically with .append()使用 .append() 动态添加标题属性以选择选项
【发布时间】：2013-12-12 05:02:56
【问题描述】：

Javascript、Jquery、HTML

我正在动态地将选择选项添加到选择框。我将数组中的每个唯一元素作为选项添加到选择元素中。它很好用，但我需要同时添加一个标题属性，其值与选项文本相同。这样做的最终目标是为每个选项制作工具提示。

所以不是<option>value</option>，而是看起来像

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

这有意义吗？

当前 HTML：

<select id="Process_Issue" class="fieldLabel2 IncidentInputField dynamicFields1"></select>

JS：

$.each(eliminateDuplicates(aryProcess), function (key, value) { $('#Process_Issue').append($("<option/>", { text: cleanNulls(value) })); });

【问题讨论】：

标签： javascript jquery select append

【解决方案1】：

您可以在附加时指定标题：

JSFiddle

HTML

<select id="my_select"></select>

$('#my_select').append('<option title="value1">value1</option>');
$('#my_select').append('<option title="value2">value2</option>');
$('#my_select').append('<option title="value3">value3</option>');

【讨论】：

到目前为止所有的答案都是正确的，但你首先得到了它，而且它更符合我当前的代码。我显然把它放在一个循环中（而不是 value1、value2 等）。感谢您的快速响应！
很高兴我能提供帮助，我认为您想要一个更直接的答案。

【解决方案2】：

可以设置title属性

$('#Process_Issue').append(
    $("<option/>", { text: value }).attr("title",value)
 );

这是一个工作示例http://jsbin.com/ozudoTod/1/

【讨论】：

根据 MonkeyZeus 的回答，这几乎就是我最终的结果。我喜欢这样的格式： $('#Process_Issue').append($(''));而不是你所拥有的（以及我发布问题时所拥有的）。我认为它只是读起来更好，而且一目了然。

【解决方案3】：

您似乎在数组中的每次迭代中多次使用相同的选择器。而是缓存它并节省一些查找时间。

var $select = $('#Process_Issue');
$.each(eliminateDuplicates(aryProcess), function (key, value) { 
     var val = cleanNulls(value);
     $select .append($("<option/>", { 
          text: val,
          title: val
     })); 
});

如果这不起作用，请使用.attr 方法将属性连接到元素。

var $select = $('#Process_Issue');
$.each(eliminateDuplicates(aryProcess), function (key, value) { 
    var val = cleanNulls(value);
    $('<option/>').attr({
         text: val,
         title: val
    }).appendTo($select);
});

【讨论】：

你是对的。但是，每个选择框中只会有几个选项（多个选择框，所有选项都根据需要动态发生），但每个选项都有大约 12 个或更少的选项，所以在这种情况下我并不关心速度。好答案！

【解决方案4】：

一种更简洁的方法是在创建元素之前使用所有值，然后像这样追加：

value = cleanNulls( value );
var option = $( '<option/>', {
    title: value,
    text: value
});

$('#Process_Issue').append( option );

这种方法更简洁，更易于阅读/维护

【讨论】：

与 Sushanth 的回答非常相似 .. 很好。谢谢！