js动态设置select下拉菜单的默认选中项实例


Posted in Javascript onAugust 21, 2018

利用javascript设置select下拉菜单的选中项。

代码实例如下:

<!--js动态设置select下拉菜单的默认选中项--> 
<html> 
<head> 
<title>下拉菜单</title> 
<script type="text/javascript"> 
window.onload=function(){ 
 var osel=document.getElementById("selID"); //得到select的ID
 var opts=osel.getElementsByTagName("option");//得到数组option
 var obt=document.getElementById("bt");
 obt.onclick=function(){
 opts[3].selected=true;//设置option第4个元素,即value="3"为默认选中
 }
} 
</script> 
</head> 
<body> 
<select name="select" id="selID"> 
<option value="0">下拉菜单一</option> 
<option value="1">下拉菜单二</option> 
<option value="2" selected>下拉菜单三</option> 
<option value="3">下拉菜单四</option>
<option value="4">下拉菜单五</option> 
</select> 
<input type="button" id="bt" value="查看效果"/>
</body> 
</html>

以上代码实现:

1、初始时选中下拉菜单三;

js动态设置select下拉菜单的默认选中项实例

2、点击按钮可以设置select下拉菜单的默认选中项---下拉菜单四。

js动态设置select下拉菜单的默认选中项实例

以上这篇js动态设置select下拉菜单的默认选中项实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
Firefox window.close()的使用注意事项
Apr 11 Javascript
javascript深入理解js闭包
Jul 03 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
js控制table合并具体实现
Feb 20 Javascript
jquery实现图片切换代码
Oct 13 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 Javascript
利用JavaScript写一个简单计算器
Nov 27 Javascript
Canvas实现微信红包照片效果
Aug 21 #Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 #Javascript
js canvas实现红包照片效果
Aug 21 #Javascript
js实现简单选项卡功能
Mar 23 #Javascript
js实现轮播图的完整代码
Oct 26 #Javascript
JQuery扩展对象方法操作示例
Aug 21 #jQuery
详解Vue结合后台的列表增删改案例
Aug 21 #Javascript
You might like
什么是MVC,好东西啊
2007/05/03 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
JavaScript 学习技巧
2010/02/17 Javascript
JQUERY获取form表单值的代码
2010/07/17 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
Python 求数组局部最大值的实例
2019/11/26 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
python生成word合同的实例方法
2021/01/12 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
计算机应用专业推荐信
2013/11/13 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
纪律委员竞选稿
2015/11/19 职场文书
详解Python requests模块
2021/06/21 Python
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
SpringRetry重试框架的具体使用
2021/07/25 Java/Android