代码之家 › 专栏 › 技术社区 › Developer

使用选项中的长文本(IE中的受限视图)固定大小下拉列表[重复]

css html

Developer · 技术社区 · 14 年前

可能重复:
How to expand 'select' option width after the user wants to select an option

我有一个下拉列表,其中包含相当长的文本。它在Firefox中显示得很好,但是当我在Internet Explorer中单击它时,它会根据大小显示修剪过的文本。

<select style="width:100px;" id="test">
<option>1239187239172391823kajsasdfaasdfas9817293971293</option>
<option>1239187239172391823kajsasdfaasdfas9817293971293</option>
<option>1239187239172391823kajsasdfaasdfas9817293971293</option>
<option>1239187239172391823kajsasdfaasdfas9817293971293</option>
</select>

当你在火狐中打开上面下拉的页面并点击查看它的值时,它会显示完整的描述。但在InternetExplorer中,单击它时只显示100px,其余的文本被修剪。

在IE中单击下拉列表时,是否有任何方法可以查看完整的文本?如在Firefox中所示?

3 回复 | 直到 13 年前

Jogendra 14 年前

这是由浏览器呈现的控件呈现引擎&some css属性可能不适用于它。为了达到你的目标,试着做一些这样的定制控制

HTML标记:

<ul  id="test">
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
</ul>

CSS: 

    #test li{
display:block;
background-color:#CCCCCC;
border:1px #FFF solid;
display:none;
width:auto;
cursor:pointer;
}
#test li:hover{
background-color:#999999;
}

jquery:查询:

$("#test li:first").css({'width':150+'px','display':'block', 'border':'1px #000 solid', 'overflow':'hidden', 'cursor':'pointer'});
    $("#test li:first").toggle(function(){
                        $(this).siblings().css({'display':'list-item','width':'auto'});
                        },
                        function(){
                        $(this).siblings().css({'display':'none'});
                        }

这只是一个粗略的草图。

Developer 14 年前

感谢Jogendra的草图。这是完整的工作副本

<div class="ddcMain">
    <div class="selection">Selection</div>
    <input type="hidden" id="itemSelected" name="itemSelected" value=""  />
    <div class="ddListCon">
        <ul id="ddList">
            <li>1239187239172391823kajsasdfaasdfas9817293971293</li>
            <li>1239187239172391823kajsasdfaasdfas9817293971294</li>
            <li>1239187239172391823kajsasdfaasdfas9817293971295</li>
        </ul>   
    </div>
</div>

<style>
div.ddcMain{ position:relative;}
div.selection { width:150px; overflow:hidden; border:1px solid; padding:5px;}
div.ddListCon {position:absolute; top:33px; display:none; border:1px #000 solid; padding:5px;}
div.ddListDisplay {display:block;}
ul#ddList{ list-style:none; margin:0; padding:0;}
ul#ddList li:hover{
    background-color:#999999;
}

ul#ddList li
{
    display:list-item;
    width:auto;
}

</style>

<script type="text/javascript">
  $(document).ready(function() {
      $('div.selection').bind('click', function(){
         $("div.ddListCon").toggleClass("ddListDisplay");     
      });
      $('ul#ddList li').bind('click', function(){
          $('div.selection').text($(this).text());
          $('#itemSelected').val($.trim($(this).text()));

          $("div.ddListCon").toggleClass("ddListDisplay");    
      });



  });
</script>

D. Patrick 13 年前

我一直在回答这样的老问题。这是一个常见的问题。我写这篇文章的时候,你可能会发现有帮助: http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

它是一个jquery插件,用于生成由隐藏的select元素支持的可样式无序列表。

源位于Github上: https://github.com/tncbbthositg/GiantDropdown

你可以在UL上处理你不能选择的行为和风格。其他一切都应该是相同的,因为选择列表仍然存在,它只是被隐藏了,但保险商实验室将使用它作为备份数据存储(如果您愿意)。