js动态设置select下拉菜单的默认选中项实例

 更新时间:2018年08月21日 16:36:58   作者:xujing19920814  
今天小编就为大家分享一篇js动态设置select下拉菜单的默认选中项实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

利用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、初始时选中下拉菜单三;

2、点击按钮可以设置select下拉菜单的默认选中项---下拉菜单四。

以上这篇js动态设置select下拉菜单的默认选中项实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Java前后端分离之权限管理示例分析

    Java前后端分离之权限管理示例分析

    权限管理就是管理用户对于资源的操作。本 CRM 系统的权限(也称作资源)是基于角色操作权限来实现的,即RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联
    2022-08-08
  • 详解微信小程序的不同函数调用的几种方法

    详解微信小程序的不同函数调用的几种方法

    这篇文章主要介绍了微信小程序的不同函数调用的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 使用递归遍历对象获得value值的实现方法

    使用递归遍历对象获得value值的实现方法

    下面小编就为大家带来一篇使用递归遍历对象获得value值的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JavaScript中window和document用法详解

    JavaScript中window和document用法详解

    这篇文章主要介绍了JavaScript中window和document用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 怎样在html文档里做隔行换色的多行方法

    怎样在html文档里做隔行换色的多行方法

    怎样在html文档里做隔行换色的多行方法...
    2007-01-01
  • 微信小程序支付前端源码

    微信小程序支付前端源码

    这篇文章主要为大家详细介绍了微信小程序支付前端源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • JS控制网页动态生成任意行列数表格的方法

    JS控制网页动态生成任意行列数表格的方法

    这篇文章主要介绍了JS控制网页动态生成任意行列数表格的方法,实例分析了javascript操作表格节点控制dom元素添加的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • javascript天然的迭代器

    javascript天然的迭代器

    有一个数n=5,不用for循环,怎么返回[1,2,3,4,5]这样一个数组
    2010-10-10
  • js解决select下拉选不中问题

    js解决select下拉选不中问题

    当事件mouseover中出现select下拉框时,select下拉是选不中的,下面有个不错的解决方法,大家可以看看
    2014-10-10
  • 前端JS可视化学习利用向量判断多边形边界

    前端JS可视化学习利用向量判断多边形边界

    这篇文章主要为大家介绍了前端JS可视化学习利用向量判断多边形边界示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12

最新评论