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对象和属性的创建方法
Jan 15 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 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实现redis数据库指定库号迁移的方法
2015/01/14 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python中操作MySQL入门实例
2015/02/08 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
python编写实现抽奖器
2020/09/10 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
ddl,dml和dcl的含义
2016/05/08 面试题
中科创达面试题
2016/12/28 面试题
促销活动方案模板
2014/02/24 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
活着观后感
2015/06/03 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
Java数据结构之堆(优先队列)
2022/05/20 Java/Android
Redis基本数据类型List常用操作命令
2022/06/01 Redis
Mysql中mvcc各场景理解应用
2022/08/05 MySQL