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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
javascript 写的一个简单的timer
Jul 30 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
JavaScript File分段上传
Mar 10 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
js实现简易点击切换显示或隐藏
Nov 29 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
php zip文件解压类代码
2009/12/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
清洁工表扬信
2014/01/08 职场文书
新闻传播专业求职信
2014/07/22 职场文书
刑事和解协议书范本
2014/11/19 职场文书
2015年底工作总结范文
2015/05/15 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
JavaScript实现栈结构详细过程
2021/12/06 Javascript