Question

Javascript，Jquery，HTML

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

所以不是<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) })); });

Answer 1

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

JSFiddle

<强> HTML

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

<强> JS

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

Answer 2

您可以设置title属性

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

以下是工作示例http://jsbin.com/ozudoTod/1/

Answer 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);
});

Answer 4

更简洁的方法是在使用所有值之前创建元素，然后添加如下：

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

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

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

添加title属性以使用.append（）动态选择选项

4 个答案: