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 相关文章推荐
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
jsonp原理及使用
Oct 28 Javascript
innerText 使用示例
Jan 23 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
用python写扫雷游戏实例代码分享
2018/05/27 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
实现Python与STM32通信方式
2019/12/18 Python
基于python 取余问题(%)详解
2020/06/03 Python
用python写爬虫简单吗
2020/07/28 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
中学老师的自我评价
2013/11/07 职场文书
党校学习思想汇报
2014/01/06 职场文书
出纳会计岗位职责
2014/03/12 职场文书
王老吉广告词
2014/03/20 职场文书
六一节目主持词
2014/04/01 职场文书
单位租房协议书样本
2014/10/30 职场文书
致运动员的广播稿
2015/08/19 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
Python基础之变量的相关知识总结
2021/06/23 Python
Spring实现内置监听器
2021/07/09 Java/Android