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 相关文章推荐
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
利用JavaScript写一个简单计算器
Nov 27 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
推荐一篇入门级的Class文章
2007/03/19 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
详解React 在服务端渲染的实现
2017/11/16 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
python基础教程之Filter使用方法
2017/01/17 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
python得到电脑的开机时间方法
2018/10/15 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
初中女生自我鉴定
2013/12/19 职场文书
募捐倡议书
2014/04/14 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
岁月神偷观后感
2015/06/11 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记