select option 下拉框文本显示不全处理办法.

最新推荐文章于 2023-11-16 10:08:48 发布

IAMLEI00

最新推荐文章于 2023-11-16 10:08:48 发布

阅读量4.8k

点赞数

文章标签： function jquery ie div

本文链接：https://blog.csdn.net/lei_00/article/details/6740430

版权

老项目要维护一个功能，页面的下拉框为了显示美观，宽度都固定了，导致一些长文本显示不全。要求IE6及其以上版本、火狐兼容，不能破坏原来布局。

本来用的是title属性，效果好修改简单，可惜破IE6不支持option的title属性。以下例子是用滚动条控制的，可以给大家一个思路。

1.本示例基于Jquery，首先导入jquery库。

2.代码如下：

<html>
<head>
<title>lei_00'blog</title>
<style>
    .frm270{ width:270px; }
</style>
</head>
<script type="text/javascript" src="jquery.js"></script>
<body>
                     <div id="selectDiv" style="width:270px;overflow-x:hidden;background:#00FF00">
                          <select name="lei_00" id="lei_00" >
                              <option >ppoopoosss</option>
                              <option >asdfasdsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</option>
                              <option >asdfasfjwqefjaksjfjklasflaskjdfljasjfkljaskldflajfdladfl</option>
                              <option >dddddddddddddddddddddddddd</option>
                              <option >dddddddddddddddddddddddddddddddddd</option>
                              <option >Gdddddddddddddddddddddddddddddddddddddddderechtigt</option>
                              <option >Gesggggggggggggggggggggggggggggggglprokura)</option>
                              <option >Kogsssssssssssssssssssssssssssssssokura)</option>
                              <option >Kommdddddddddddddddddddddddddddddddddura)</option>
                              <option >Prosssssssssssssssssssssssssssssssssssssssssssssssssten)</option>
                              <option >ProppppppppppppppppppdddddddddddddddddddddddddddddddddddddddddddddddddddGF)</option>
                              <option >Gesjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjkura)</option>
                              <option >Gejjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjuristen</option>
                              <option >opehhhhhhhhhhhhhh</option>
                              <option >opehhhhhhhhhhhhh</option>
                              <option >operahhhhhhhhhhhhhhhhhhhhhhhhhhhh</option>
                              <option >Geschhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhigt</option>
                              <option >Geschhhhhhhhhhhhhhhhhhhhhhhgt</option>
                         </select>
                     </div>

      <script type="text/javascript">

          jQuery(function($) {
                          $("#lei_00").addClass("frm270");
            });

          var flag=true;
          $("#lei_00").mouseover(
          function () {
            $(this).css({width:"auto"});
            flag=true;
           }
        );

           $("#lei_00").change(
          function () {
            $(this).css({width:"270px"});
          flag=false;
          }
        );

          $("#lei_00").mouseout(
          function () {
             if(flag){
                $(this).css({width:"270px"});
          }
          }
        );
          $("#lei_00").mousedown(
          function () {
             if(event.button==1){
            flag=false;
          }
          }
        );
     </script>

</body>
</html>

IAMLEI00

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
select option 下拉框文本显示不全处理办法.

老项目要维护一个功能，页面的下拉框为了显示美观，宽度都固定了，导致一些长文本显示不全。要求IE6及其以上版本、火狐兼容，不能破坏原来布局。本来用的是title属性，效果好修改简单，可惜破IE6不支持option的title属性。以下例子是用滚动条控制的，可以给大家一个思路。
复制链接

扫一扫