动态改变select option时，宽度自动变短解决方法

最新推荐文章于 2024-06-19 22:00:00 发布
最新推荐文章于 2024-06-19 22:00:00 发布
阅读量2.4k 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lchina1314/article/details/8774316
版权

代码不应该是先设置属性在追加，而应该是先追加再设置属性。

原因是 追加DOM要先追加后设置属性，否则会有reflow发生。

<html>
  <head>
      
   <title>JQuery</title>
 <meta http-equiv="pragma"content="no-cache">
 <meta http-equiv="cache-control"content="no-cache">
 <meta http-equiv="expires"content="0">   
 <meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
 <meta http-equiv="description"content="This is my page">
 <!--
 <link rel="stylesheet"type="text/css" href="styles.css">
 -->
 <script type="text/javascript"src="js/jquery-1.6.2.js"></script>
 <scripttype="text/javascript">
  function add(){
       var obj = document.getElementByIdx('lst1');
       var opn = document.createElement("OPTION");
       obj.appendChild(opn);//先追加
       opn.innerText = 11;
       opn.value = 11;
      
    }
 
 </script>
  </head>
 
  <body>
    <table style="width:500px;">
   <tr>
       <td style="width:100%;">
           <select id="lst1"style="width:95%;">
               <option>1</option>
           </select>
        </td>
   </tr>
</table>
<input type="button" value="show"οnclick="add();">
   
  </body>
</html>

lchina1314
关注
专栏目录
《NX二次开发官方案例》专栏目录A
王牌飞行员_里海的博客
05-24 915
本专栏订阅后是永久阅读的。欢迎一起学习NX二次开发案例，逐步积累宝贵的经验，早日成为行业专家。
UG\NX二次开发 多少词汇量才能无障碍阅读开发帮助
王牌飞行员_里海的博客
04-24 2120
大家都知道UFUN的帮助是英文的，有的开发者抱怨看不懂，还有的开发者为了能看懂接口说明专门学英语，那么英语学成什么程度就能无障碍阅读接口文档？我比较好奇，所以专门将UF_MODL部分的ufun函数的接口说明，提取出单词以作统计。大家猜一猜无障碍阅读UF_MODL部分的内容，需要多少词汇量储备呢？
固定宽度的select下拉列表option选项显示不全的解决办法
kalogen的专栏
01-19 1133
昨天因为工作需要，研究了下select下拉列表，发现一段JS并进行了修改，因为源代码存在一个bug,所以我进行了稍微修改并注明，希望能对大家有所帮助！   固定宽度的select下拉列表option选项显示不全的解决办法:在实际的开发中在页面中为了布局的需要，下拉菜单&lt;select&gt;的宽度要设成比较小的值，但这时由于包含的选择项&lt;option&gt;的内容比较长，那么超出...
ie7 动态改变select option时，宽度自动变短解决方法
11-07 139
<html> <head> <title>JQuery</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> ...
ElementUI el-select 改变高度
最新发布
HDdgut的博客
06-19 912
给el-select加一个自定义类，这样不会影响其他的el-select，或是scoped，但是需要加/deep/修改 ElementUI el-select 高度，同时需要修改内部样式，否则下拉箭头会发生偏移。
关于我的博客
cicisd1987的博客
08-12 283
如无特别声明，我在这里的文章使用 CC BY-ND 4.0 国际版许可证进行许可。 G M T ...
纯CSS实现select的placeholder效果
爱丽丝漫游前端小世界
12-03 1万+
利用CSS伪类，为select添加伪类required，即不能为空；而默认选项(Placeholder)的value为空，触发invalid，实现不选时置灰的效果；
使用div+css模拟select功能与效果
kk371558956的专栏
11-22 3356
colee做的模拟select效果 * {  margin: 0px;  padding:0; } input,img {vertical-align:middle;} .Option .on { background:#2F67D0; color:#fff;} --> function CoLeeSelect(thisObj){  var thisinput =
pyautogui自动化-客户端程序完美自动化
高级拳师的博客
08-13 5136
** pyautogui自动化测试客户端程序 ** 最近针对于 公司网盘的客户端产品，思考了一下，是否能够实现自动化测试呢? 嗯，谷歌一搜，果然没有让人失望，找到了这个：pyautogui 参考链接：让所有gui都自动化 首先需要安装pyautogui，很简单，cmd运行：pip install pyautogui 然后打开你的python编译器，我的是pycharm，然后就可以写你想要自动化的...
第12课：图形用户界面
Jin_Kwok的博客
10-28 301
作为 Python 开发者，图形用户界面（GUI）开发是必备技能之一。目前，市面上支持 Python 的“GUI 工具包”很多，各有特点，虽然大多数工具包的基础类似，但要学习一个新包并掌握其细节还是非常耗时的，因此，在选用工具包时应仔细权衡。本文将介绍 Python 自带的 GUI 工具包 TKinter。 TKinter Python 的 GUI 库非常多，之所以选择 Tkinter，一是最为简...
Qt开发经验总结
草上爬的博客
12-02 8210
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
select2的宽度样式问题
zhen3368的博客
12-18 6034
转载自 select2的宽度样式问题 作者 姜瑞涛 根据select2的官方文档做练习，做的是 basic usage这个最简单的例子。做这个练习的时候发现，浏览器展示下拉选的样式不正常，宽度非常窄，也正常使用了select2自身CSS文件和jquery，不知道是什么原因导致的该问题。如下图 select2的宽度样式问题-姜瑞涛 下面是代码 Document ...
动态联动select下拉框实现
热门推荐
直到世界的尽头
05-22 2万+
我们在做下拉框选择时，常常会遇到一种场景，就是需要两个下拉框，其中一个下拉框的选项和内容需要根据第一个的下拉框的选择动态变化。比如我有大的分类:有氧运动  无氧运动选择有氧运动时，选项有：跑步，游泳选择无氧运动时，选项有：深蹲，卧推本章记录如何实现动态联动select下拉框实现。我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录动态联动se
select2如何设置默认空值
jrrfgj的博客
11-15 4234
select2如何设置默认空值
option设置宽度_pads布线时画出来线没有宽度，只有一条细线，放大仍很细？
weixin_39701768的博客
12-06 1386
用pads进行布线时，画出来的线没有宽度，只有一条很细的线，即便放大，这条线仍然很细，这是什么原因呢？这个问题对新安装使用Pads的用户造成了一定的困惑，实际上，这是Pads对于显示最细线宽的设定所造成的。打开options下面有一个minimum display ，设置成想限制显示的最小线宽，当实际画的线大于该值的时候，则PadsLayout会显示实际线宽，小于该值的时候则只会显示一条细线。设置...
CSS-select和option宽度不一致
hzzh_kk的博客
03-23 518
在做手机pc端的表单需求的时候，用浏览器开发者工具将网页切换成手机格式调试时，发现select和option的宽度不一致的问题
select更改默认样式
KevinMiGuan的博客
11-14 839
代码示例如下： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css" media="screen"> *{ margin:0; padding:0; } .selectBox{width:242px;height:56px;margin-right:36px;border-radius:4px;display: inlin
给select下拉框设置高度
weixin_34332905的博客
12-07 1084
2019独角兽企业重金招聘Python工程师标准>>> ...
解决option宽度超出select宽度
05-31
要解决option宽度超出select宽度的问题，可以尝试以下方法： 1. 设置select的宽度为固定值，例如：width: 200px。 2. 使用CSS属性white-space:nowrap;使文本不换行，例如：select option{white-space:nowrap;}。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值