select下拉列表提示title添加

最新推荐文章于 2024-08-27 15:52:39 发布

zhanglujie2008

最新推荐文章于 2024-08-27 15:52:39 发布

阅读量1.1w

点赞数

分类专栏： oracle

本文链接：https://blog.csdn.net/zhanglujie2008/article/details/8759235

版权

oracle 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在我们做项目的过程中可能有时候列表的宽度是一定的，这时候我们的列表内容可能不能从列表的窗口中完全看到，此时就需要给列表加一下title，当鼠标悬浮在select列表的上方时就能够看到所有的文本。这个功能需要2个过程：1、初始化被选项的title 2、onchange事件改变时切换title。

下边给出这2个事件的函数：

1、初始化title

/*select列表init事件获取select的option标签title*/
	function addSelectOptionsTitle(selectObj){
        for(var j=0;j<selectObj.options.length;j++){
	        		var opt = selectObj.options[j];
					opt.title=opt.text;
					if(opt.selected){
	  				selectObj.title=opt.text;
					}
			}	
	}

2、onchange事件切换

/*select列表onChange事件获取select标签title*/
	function addSelectTitle(selectObj){
		for(var j=0;j<selectObj.options.length;j++){
	   	  var opt = selectObj.options[j];
			if(opt.selected){
			  selectObj.title=opt.text;
			}
	     }
	}

测试代码：

<body οnlοad="addSelectOptionsTitle($('sel'))">
<select id="sel"  οnchange="addSelectTitle(this)">
<option>我相信患难的真情</option>
<option>我不信生生世世的约定</option>
</select>
</body>

效果图：