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与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
Node.js的包详细介绍
Jan 14 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
vue实现循环滚动列表
Jun 30 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实现采集程序原理和简单示例代码
2007/03/18 PHP
php横向重复区域显示二法
2008/09/25 PHP
PHP fclose函数用法总结
2019/02/15 PHP
简单JS代码压缩器
2006/10/12 Javascript
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
iPython pylab模式启动方式
2020/04/24 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
古汉语文学求职信范文
2014/03/16 职场文书
无私奉献演讲稿
2014/09/04 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
项目投资意向书范本
2015/05/09 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
python迷宫问题深度优先遍历实例
2021/06/20 Python
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电