javascript：使用 javascript 在选择标签中设置选项的标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7019262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript: set title of option in select tag with javascript
提问by Johnny
I am working on a project where I have a select tag with its options being generated in a javascript function. I am currently populating the "title" attribute of each option with a detailed description.
Inside the javascript function I am currently doing something like this:
我正在开发一个项目，在该项目中我有一个选择标签，其选项是在 javascript 函数中生成的。我目前正在用详细说明填充每个选项的“标题”属性。
在 javascript 函数中，我目前正在做这样的事情：
var country = new Option("countryUSA", "United States of America");
$("#mySelect").get(0).options[1]=country;
This works fine, the option shows up. However, I also need to set the "title" attribute of that html option element. I have tried something like this:
这工作正常，选项出现。但是，我还需要设置该 html 选项元素的“title”属性。我试过这样的事情：
country.title="Full description of USA";
but it does not work.
I know I can do something like this:
但它不起作用。
我知道我可以做这样的事情：
$("#mySelect").get(0).options[1].title="My title";
but I was trying to set the title before adding the option to the select tag. Isn't the "Option" object suppose to allow me to set the "title" property? The javascript function is not even executed. Is there no way I can set the "title" attribute for an "option" html element in javascript?
但我试图在将选项添加到选择标签之前设置标题。“Option”对象不是应该允许我设置“title”属性吗？甚至没有执行 javascript 函数。有没有办法在javascript中为“选项”html元素设置“标题”属性？
回答by Matt Ball
It looks like you're using jQuery. There is a much simpler way to do what you want. Just use the jQuery APIrather than regressing back to vanilla DOM:
看起来您正在使用 jQuery。有一种更简单的方法可以做你想做的事。只需使用jQuery API而不是回归到 vanilla DOM：
$('<option>',
{
value: 'countryUSA',
title: 'Full description of USA',
text: 'United States of America'
}).appendTo("#mySelect");
That said, do you expect setting the titleto make a browser-native tooltip to appear while the hovering over the <option>? At least in Chrome, no such tooltip will appear.
也就是说，您是否希望将 设置为title在悬停在 上时显示浏览器原生工具提示<option>？至少在 Chrome 中，不会出现这样的工具提示。
Try it yourself: http://jsfiddle.net/GMTLn/1/
自己试试：http: //jsfiddle.net/GMTLn/1/
EditChrome and Safari do not show a tooltip on <option>s with a titleattribute because WebKit doesn't. See this bug report.
编辑Chrome 和 Safari 不会在<option>带有title属性的s 上显示工具提示，因为 WebKit 没有。请参阅此错误报告。
回答by Harry Sarshogh
You can set the title attribute
您可以设置标题属性
$('#mySelect').append(
$("<option/>", { text: value }).attr("title",value));
Here is a working sample http://jsbin.com/ozudoTod/1/
这是一个工作示例http://jsbin.com/ozudoTod/1/
Or this way :
或者这样：
value = cleanNulls( value );
var option = $( '<option/>', {
title: value,
text: value
});
$('#mySelect').append( option );
