html中下拉列表很长,JavaScript解决select下拉框中的内容太长显示不全的问题

JavaScript解决select下拉框中的内容太长显示不全的问题

1、说明

有些情况下，select下拉框的内容过长，导致部分看不见；

现在通过鼠标事件，让下拉框中的内容显示完全

2、实现源码

JavaScript解决select下拉框中的内容太长显示不全的问题

/**

* 自动设置select下拉框的宽度

*/

function autoWidth()

{

//获取select中的ID

var selectId = document.getElementById("select_option");

//自动设置下拉框的宽度

selectId.style.width = 'auto';

}

/**

* 设置select下拉框的宽度

*/

function setWidth()

{

//获取select中的ID

var selectId = document.getElementById("select_option");

//设置select下拉框的宽度为120

selectId.style.width = "120px";

}

οnmοusedοwn="autoWidth()"

οnblur="setWidth()"

οnchange="setWidth()">

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD

EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE

FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF

GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG

HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII

JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ

3、实现结果

(1)初始化时

(2)选中第三项