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 相关文章推荐
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
解决layUI的页面显示不全的问题
Sep 20 Javascript
vue实现扫码功能
Jan 17 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 Javascript
原生js实现无缝轮播图效果
Jan 28 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 xml文件操作代码(一)
2009/03/20 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
简单学习vue指令directive
2016/11/03 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
Python中的引用知识点总结
2019/05/20 Python
Python中return函数返回值实例用法
2020/11/19 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
如何利用find命令查找文件
2015/02/07 面试题
中学生学习生活的自我评价
2013/10/26 职场文书
党性教育心得体会
2014/09/03 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
5.12护士节活动总结
2015/02/10 职场文书
汽车销售员工作总结
2015/08/12 职场文书
德生2P3收音机开箱评测
2022/04/30 无线电
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL