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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 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
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
python查找指定具有相同内容文件的方法
2015/06/28 Python
python实现三次样条插值
2018/12/17 Python
在python shell中运行python文件的实现
2019/12/21 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
优秀三好学生事迹材料
2014/08/31 职场文书
公证委托书标准格式
2014/09/11 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
2014年话务员工作总结
2014/11/19 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
北京故宫的导游词
2015/01/31 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers