让Dropdownlist拥有Tooltip属性[通俗易懂]

全栈程序员-站长 • 2022年9月1日下午7:36 • 未分类 • 阅读 5

需求：现在遇到这样一个实例：DropdowList控件占用的宽度只有100px，而数据信息占用宽度有150px以上，在不允许提高宽度的前提下我们只有通过ToolTip属性来得以扩展，方便用户识别各个选项的差异性。在这里我觉得用javascript来实现显得格外的方便.【该段为转载】

代码：

<
HTML
>

让Dropdownlist拥有Tooltip属性[通俗易懂]

<
HEAD
>

让Dropdownlist拥有Tooltip属性[通俗易懂]

<
TITLE
>
New Document
</
TITLE
>

<
script
language
=”javascript”
type
=”text/javascript”
>

让Dropdownlist拥有Tooltip属性[通俗易懂]

//该脚本来自网络

function showdropitem()

{

var el = document.getElementsByTagName(“select“);
让Dropdownlist拥有Tooltip属性[通俗易懂]

for(i=0;i<el.length;i++)

{

for(j=0;j<el[i].options.length;j++)

{

el[i].options[j].title = el[i].options[j].text;
让Dropdownlist拥有Tooltip属性[通俗易懂]

}

</
script
>

让Dropdownlist拥有Tooltip属性[通俗易懂]

</
HEAD
>

让Dropdownlist拥有Tooltip属性[通俗易懂]

<
BODY
onload
=”showdropitem()”
>

让Dropdownlist拥有Tooltip属性[通俗易懂]

<
select
name
=”selOperator”
id
=”selOperator”

>

让Dropdownlist拥有Tooltip属性[通俗易懂]

<
option
value
=”501″
selected
>
sina
</
option
>

让Dropdownlist拥有Tooltip属性[通俗易懂]

<
option
value
=”503″
>
sohu
</
option
>

让Dropdownlist拥有Tooltip属性[通俗易懂]

<
option
value
=”505″
>
yahoo
</
option
>

让Dropdownlist拥有Tooltip属性[通俗易懂]

<
option
value
=”510″
>
chianren
</
option
>

让Dropdownlist拥有Tooltip属性[通俗易懂]

</
select
>

让Dropdownlist拥有Tooltip属性[通俗易懂]

</
BODY
>

让Dropdownlist拥有Tooltip属性[通俗易懂]

</
HTML
>

注意：这里给出了一个应用的例子，是HTML的应用，在ASP.net中不需要对脚本进行修改，直接移植即可；同时应该注意该段代码在IE7下是通过的，在IE6下有点问题。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/189190.html原文链接：https://javaforall.net