Question

我有一个html选择元素，它包含三个选项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代码，并设置了title属性，但每个选项元素都获得了title_3＆＃34;标题属性＆＃34; Tooltip for value_3＆＃34;这不是目的：

 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()]);
});

<强> Code Example

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

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

3 个答案: