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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
JS script脚本中async和defer区别详解
Jun 24 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使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
功能强大的php分页函数
2016/07/20 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
JsDom 编程小结
2011/08/09 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
JS实现方形抽奖效果
2018/08/27 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
小程序实现密码输入框
2020/11/16 Javascript
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
详解Python编程中包的概念与管理
2015/10/16 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
Python中一行和多行import模块问题
2018/04/01 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
kafka-python批量发送数据的实例
2018/12/27 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
乡镇庆八一活动方案
2014/02/02 职场文书
Linux中如何安装并部署Redis
2022/04/18 Servers
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python
JS实现九宫格拼图游戏
2022/06/28 Javascript