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 XML实现两级级联下拉列表
Nov 10 Javascript
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
node.js中的require使用详解
Dec 15 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
Python判断有效的数独算法示例
2019/02/23 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
python实现双人五子棋(终端版)
2020/12/30 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
企业总经理职责
2014/02/02 职场文书
常务副总经理任命书
2014/06/05 职场文书
中秋晚会策划方案
2014/06/12 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
九年级语文教学反思
2016/03/03 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python