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 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 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
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
教大家使用Python SqlAlchemy
2016/02/12 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
怎样自定义一个异常类
2016/09/27 面试题
史上最全面的Java面试题汇总!
2015/02/03 面试题
新学期决心书
2014/03/11 职场文书
财务部总监岗位职责
2014/03/12 职场文书
小学教师寄语大全
2014/04/03 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
整改落实自查报告
2014/11/05 职场文书
会议欢迎词范文
2015/01/27 职场文书
教师党员自我评价2015
2015/03/04 职场文书
党小组意见范文
2015/06/08 职场文书
保护地球的宣传语
2015/07/13 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang