设为首页收藏本站

红色代码编程论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

搜索
查看: 3476|回复: 8

js 动态添加option及选中option 和 获取选项个数

[复制链接]
发表于 2013-1-6 01:47 | 显示全部楼层 |阅读模式
假设我们有一个select,ID为abc,代码如下:
<select id="abc"></select>
那么,我们可以用js实现动态给select添加option选项。

JS代码如下:

document.getElementById('abc').options.add(new Option(名字,值))
其中,名字就是我们所看到的文本,而值就是这个option他的value了。

代码合并如下,你可以点击运行按钮查看效果:







JavaScript 代码,双击复制代码
<select id="abc">

</select>
<script>
document.getElementById('abc').options.add(new Option('第一个',1));
</script>



提示:您可以先修改部分代码再运行


下面说说选中option选项的办法:
据我所知,选中的话只能是遍历,然后根据值或文本来确定是否是你要选中的。
选中的方法为:
document.getElementById('abc').options[0].selected = true;
其中的0就是你要选中的那一个的索引。

示例代码:

JavaScript 代码,双击复制代码
<select id="abc">
<option value="0">0</option>
<option value="1">1</option>
<option value="3">3</option>
</select>
<script>
document.getElementById('abc').options[2].selected=true;
</script>


提示:您可以先修改部分代码再运行

选项的个数,当然就是document.getElementById('abc').options.length了。呵呵,这个超级简单。

本帖被以下淘专辑推荐:

发表于 2013-5-2 18:06 | 显示全部楼层
不错嘛,学习学习
发表于 2016-4-24 22:17 | 显示全部楼层
  1. <select id="abc">

  2. </select>
  3. <script>
  4. document.getElementById('abc').options.add(new Option('第一个',1));
  5. </script>
复制代码
发表于 2016-8-7 18:19 | 显示全部楼层
没生效,是否支持html代码呢?
发表于 2016-8-7 18:19 | 显示全部楼层

1

1111111111111
发表于 2016-8-7 18:42 | 显示全部楼层
前一个问题解决了,还有一个问题,代码另存是有bug吗?
发表于 2016-12-2 11:49 | 显示全部楼层
  1. html {
  2.         font-size: 100px;
  3.         height: 100%;
  4.         width: 100%;
  5.         font-family: 'Heiti SC', 'Microsoft YaHei';
  6.         outline: 0;
  7.         -webkit-text-size-adjust: none;
  8.         text-size-adjust: none;
  9. }
复制代码
发表于 2017-11-20 12:10 | 显示全部楼层
  1. <select id="abc">
  2. <option value="0">0</option>
  3. <option value="1">1</option>
  4. <option value="3">3</option>
  5. </select>
  6. <script>
  7. document.getElementById('abc').options[2].selected=true;
  8. </script>
复制代码
发表于 2017-11-20 12:36 | 显示全部楼层

提示:您可以先修改部分代码再运行

积分兑换实物排行

您需要登录后才可以回帖 登录 | 注册 用百度帐号登录

本版积分规则

QQ|申请友链|小黑屋|手机版|Archiver|红色代码编程论坛 ( 鲁ICP备11027229号  

GMT+8, 2018-10-19 00:50 , Processed in 0.109375 second(s), 32 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表