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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
Javascript变量函数浅析
Sep 02 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
我所理解的JavaScript中的this指向
Sep 04 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
php 类自动载入的方法
2015/06/03 PHP
php实现源代码加密的方法
2015/07/11 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
JavaScript多线程详解
2015/08/12 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
python装饰器使用方法实例
2013/11/21 Python
python进程管理工具supervisor使用实例
2014/09/17 Python
多个应用共存的Django配置方法
2018/05/30 Python
Python os.access()用法实例
2019/02/18 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
英语专业学生个人求职信
2014/01/28 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
班级读书活动总结
2014/06/30 职场文书
小学英语复习计划
2015/01/19 职场文书
工作失职检讨书范文
2015/05/05 职场文书
新娘婚礼致辞
2015/07/27 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
Redis数据同步之redis shake的实现方法
2022/04/21 Redis
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS