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初学者应注意的七个细节详细介绍
Dec 27 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
vuex存值与取值的实例
Nov 06 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 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中的串行化变量和序列化对象
2006/09/05 PHP
php5 mysql分页实例代码
2008/04/10 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
PHP实现微信发红包程序
2015/08/24 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
vuejs简单验证码功能完整示例
2019/01/08 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
Python中用altzone()方法处理时区的教程
2015/05/22 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
公司联欢晚会主持词
2014/03/22 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
Python matplotlib绘制雷达图
2022/04/13 Python