`
281601139
  • 浏览: 16402 次
  • 性别: Icon_minigender_1
  • 来自: 福建厦门
文章分类
社区版块
存档分类
最新评论

讲述下拉框自己的故事——解决html的select(下拉框)宽度问题

阅读更多

我们经常要使用select ,但select的大小会随着内容的大小而变化。很烦人啊。

网上有人说用层来替代,这个方法是可行的,就是觉得有点麻烦。

本人喜欢投机取巧。。呵呵

所以想了个懒办法--用脚本控制

当select被点击(onclick或者onchange)的时候调用脚本函数改变这个select的width值

当select失去焦点(onblur)的时候再一次调用脚本恢复这个select的width值。

<select id="linjunhong" name="xiamen" onclick="changeWidth()" onblur="resetWidth()" style="width:100px">

  <option value="zhenshuai">俊洪哥哥</option>

  <option value="junhonggege">真帅</option>

</select>

函数就自己写了,我用的是jquery,觉得比较方便。

function changeWidth(){

   $('#linjunhong').css("width","auto");

}

function resetWidth(){

   $('#linjunhong').css("width","100px");

}

======================

耍个小聪明解决大问题。哇哈哈哈

头号恶魔-厦门

 

 

 

 

 

 

 

 

 

 

3
0
分享到:
评论
3 楼 281601139 2010-04-15  
SINCE1978 写道
不是转的?看来别人转你的。
函数不起作用,firefox

Firefox好像是可以的。我给忘记了。
2 楼 SINCE1978 2010-04-15  
不是转的?看来别人转你的。
函数不起作用,firefox
1 楼 281601139 2009-09-30  
纯属自己经验总结,不足之处请指教。谢谢

相关推荐

    layui多选下拉框样式,整套layui-select-multiple

    综上所述,Layui的“layui-select-multiple”提供了一整套美观且功能丰富的多选下拉框解决方案,适合HTML5项目,能够帮助开发者快速构建具有出色用户体验的Web应用。其样式可定制,组件API易用,使得在网页中实现...

    html多选下拉框 ,CheckBox的Select组件 可多选的下拉框

    如果项目已经使用了jQuery,可以考虑使用现有的插件,如`multiselect.js`或`select2`,它们提供了预封装的多选下拉框解决方案。 以上就是关于“html多选下拉框,CheckBox的Select组件”的详细解释。通过这种方式,...

    jquery+html自定义select下拉框,下拉框美化

    在网页设计中,为了提供更好的用户体验和视觉效果,开发者经常需要对HTML元素进行自定义和美化,特别是像`&lt;select&gt;`这样的下拉框。本文将详细介绍如何使用jQuery和HTML来创建自定义的下拉框,并对其进行美化和优化。...

    select 下拉框可以多选

    例如,我们可以修改下拉框的宽度、高度,以及选项的显示方式: ```css select[multiple] { width: 200px; height: 200px; overflow-y: auto; /* 防止滚动条超出容器 */ } option:checked { background-color: ...

    下拉框带模糊查询引入select2组件.zip

    描述中提到"里面有需要引入的js,在页面带入即可",这意味着压缩包里包含了Select2所需的JavaScript文件,开发者只需在自己的HTML页面中引用这些文件,就可以使用Select2的功能。同时,"网络有模板,喜欢请点赞"提示...

    一款非常好看下拉框样式(select)

    标题提到的“一款非常好看下拉框样式(select)”正是为了改善传统HTML `&lt;select&gt;` 元素的视觉效果。在这个项目中,开发者通过引入一个名为 `selectBox.htc` 的外部样式文件,成功地实现了下拉框的美化。 HTC(HTML ...

    select多选下拉框美化

    "select多选下拉框美化"这个主题就是关于如何使用JavaScript库jQuery(jq)和CSS技术来提升HTML原生select元素的视觉效果和交互体验。下面我们将深入探讨这个话题。 首先,原生的HTML select元素在不同浏览器上展示...

    jQuery手机下拉框select

    jQuery库提供了一种优雅的方式来解决这个问题,使得在手机上使用下拉框变得更加友好和可定制。`jQuery手机下拉框select` 主要关注于改善移动端的用户体验,通过JavaScript和CSS增强下拉框的外观和功能。 ### jQuery...

    bootstrap-select 下拉框demo(含多种样式)

    bootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-...

    select下拉框添加搜索功能

    在网页开发中,`select`下拉框是常见的用户交互元素,用于提供一系列选项供用户选择。然而,随着用户体验需求的提升,单纯的下拉选择已无法满足所有场景,特别是当选项众多时。为了提高用户的操作效率,我们常常需要...

    下拉框多选select多选

    在网页设计和开发中,"下拉框多选select多选"是一个常见的功能,它允许用户在下拉菜单中选择多个选项,而不仅仅是一个。在HTML中,`&lt;select&gt;`元素通常用于创建这样的下拉菜单,但默认情况下,`&lt;select&gt;`只支持单选。...

    下拉框模糊查询-combo-select-master

    "combo-select-master"项目提供了实现下拉框模糊查询的解决方案。它可能包含以下组件和功能: 1. **搜索逻辑**:根据用户输入的字符,实时更新显示的选项,高亮匹配的部分。 2. **性能优化**:对于大数据集,可能...

    jQGrid动态填充select下拉框的选项值(动态填充)

    在某些场景下,我们需要动态地填充select下拉框的选项值,以实现更灵活的数据输入。本篇文章将详细探讨如何在jQGrid中实现这一功能。 首先,理解`select`下拉框的基本概念。在HTML中,`&lt;select&gt;`元素用于创建一个...

    bootstrap select树形下拉框

    Bootstrap Select树形下拉框是一种将传统HTML下拉选择框与树形结构相结合的组件,它使得用户在有限的空间内可以展示层次化的选项,提高了用户体验。Bootstrap Select是基于流行的前端框架Bootstrap开发的,因此它...

    editableSelect可编辑搜索的下拉框插件

    【editableSelect可编辑搜索的下拉框插件】 在网页设计和开发中,用户界面的交互性和用户体验至关重要。为了提供更高效、更便捷的输入方式,`editableSelect`插件应运而生。这款插件是一款针对下拉选择框进行增强的...

    为select下拉框添加滚动条

    当下拉菜单选项比较多的时候,select下拉列表内容过多,在IE中默认是30条选项,firefox默认是20条, 超过自动出现滚动条,但是在没出现滚动条时候样式特别不...本次上传的代码将提供一种方法将select下拉框添加滚动条

    bootstrap select 下拉框通过拼音搜索汉字

    在“bootstrap select 下拉框通过拼音搜索汉字”这个实例中,我们关注的重点是如何利用该插件实现通过输入拼音来搜索并筛选汉字的功能,这对于中文环境下的用户体验提升有着显著的作用。 首先,我们要了解Bootstrap...

    html5 IOS下拉框样式

    3. **模拟下拉框**:由于iOS的限制,有时可能需要完全模拟一个下拉框,通常使用JavaScript库如`select2`或`ion-select`(在Ionic框架中)。这些库提供高度可定制的选项列表,同时能保持与原生`&lt;select&gt;`的交互相似。...

    bootstrap树形下拉框 下拉框树形菜单

    Bootstrap Tree形下拉框是一种将传统的下拉菜单与树形结构结合的UI组件,它使得在有限的空间内展示层级关系的数据变得更加直观和易用。Bootstrap框架本身并不直接提供树形下拉框的功能,但可以通过引入第三方插件如`...

    Bootstrap框架下下拉框select搜索功能

    为了解决这个问题,Bootstrap社区开发了一些插件,如`bootstrap-select`,它为下拉框添加了搜索功能。 `bootstrap-select`是一个基于Bootstrap的下拉框增强插件,它提供了丰富的自定义选项和交互性,包括搜索功能。...

Global site tag (gtag.js) - Google Analytics