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实现twitter puddles算法实例
Dec 06 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
create-react-app中添加less支持的实现
Nov 15 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去除HTML标签实例
2013/11/06 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
js 巧妙去除数组中的重复项
2010/01/25 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
babel基本使用详解
2017/02/17 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
python cumsum函数的具体使用
2019/07/29 Python
django实现支付宝支付实例讲解
2019/10/17 Python
Python读取YAML文件过程详解
2019/12/30 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
初中女生自我鉴定
2013/12/19 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
四查四看剖析材料
2014/02/14 职场文书
考试保密承诺书
2014/08/30 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android