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 相关文章推荐
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
最新最全的手机号验证正则表达式
Feb 24 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
2006/10/09 PHP
用PHP和ACCESS写聊天室(五)
2006/10/09 PHP
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
php 删除记录实现代码
2009/03/12 PHP
PHP文件操作方法汇总
2015/07/01 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
使用Django清空数据库并重新生成
2020/04/03 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
社区十八大感言
2014/01/19 职场文书
高三体育教学反思
2014/01/29 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
春季防火方案
2014/05/10 职场文书