如何通过使用jQuery从选择html元素中选择每个选项元素？

Question

我有一个html select元素，其中包含三个选项html元素作为子元素。 我有以下JQuery代码：

jQuery('[name=element_1] option[value="value_1"]').attr('title', 'Tooltip for value_1'); 
jQuery('[name=element_1] option[value="value_2"]').attr('title', 'Tooltip for value_2');
jQuery('[name=element_1] option[value="value_3"]').attr('title', 'Tooltip for value_3');

我想为select html元素的每个可用的html元素设置一个title属性。 重要的是，每个选项元素都必须具有特定的标题属性。 上面的代码什么也没有发生。

我之前已经编写了此jQuery代码，并设置了标题属性，但是每个选项元素都获得了标题属性“ value_3的工具提示”，而这并不是目的：

 jQuery('[name=element_1]').val("value_1").attr('title', 'Tooltip for value_1') ; 
 jQuery('[name=element_1]').val("value_2").attr('title', 'Tooltip for value_2') ;
 jQuery('[name=element_1]').val("value_3").attr('title', 'Tooltip for value_3') ;

如何在JQuery中实现呢？

HTML代码：

<select id="element_1" name="element_1">
   <option value="value_1">value_1</option>
   <option value="value_2">value_2</option>
   <option value="value_3">value_3</option>
</select>

Answer 1

尝试这个

jQuery("[name=element_1] option").each(function () {
    jQuery(this).attr('title', "Tooltip for " + jQuery(this).val());
});

Answer 2

如何使用选项值作为键通过工具提示来预设对象，例如：

var tooltips = {
    'value_1': 'Tooltip for value_1',
    'value_2': 'Tooltip for value_2',
    'value_3': 'Tooltip for value_3'
};

$('#element_1 option').each(function() {
    $(this).attr('title', tooltips[$(this).val()]);
});

代码示例

Answer 3

我不确定为什么您的第二个片段完全起作用。 之所以不能正常工作，是因为您没有选择<select>每个子元素。 为了专门针对其子对象，您需要JQuery的find函数：

jQuery('[name=element_1]').find(jQuery('[value=value_1]').attr('title', 'Tooltip for value_1')); 
jQuery('[name=element_1]').find(jQuery('[value=value_2]').attr('title', 'Tooltip for value_2'));
jQuery('[name=element_1]').find(jQuery('[value=value_3]').attr('title', 'Tooltip for value_3'));

这是一个jsFiddle