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下拉菜单的默认选中项实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
利用js给datalist或select动态添加option选项的方法
有时需要从配置文件中读取信息,然后添加到用户的选择项中,比如select的option选项,下面针对此类情况做了一个实例 内容如下: <!DOCTYPE html> <html> <head> <title>鼠标点击时加载</title> <script type="text/javascript" src="jquery-1.8.3.js"></script> </head&
-
js实现select下拉框菜单
本文实例讲述了js实现select下拉框菜单的详细代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #gridComboBox { background: #fff; border: 1px solid #2d78f4; border-radius:
-
Layui 设置select下拉框自动选中某项的方法
1. 需求场景分析 用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A.在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值. 2. Layui的select下拉框是怎么实现的 为了获得一个select标配的下拉框,我们需要在html中填写的内容如下: <div class="layui-form-item"> <label class="layui-form-label"><span
-
Js操作Select大全(取值、设置选中等等)
jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[tex
-
select标签设置默认选中的选项方法
方法有两种. 第一种 通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. < select id = "sel" > < option value = "1" >1</ option > < option value = "2" selected = "selected" >2</ option > <
-
js动态设置select下拉菜单的默认选中项实例
利用javascript设置select下拉菜单的选中项. 代码实例如下: <!--js动态设置select下拉菜单的默认选中项--> <html> <head> <title>下拉菜单</title> <script type="text/javascript"> window.onload=function(){ var osel=document.getElementById("selID"
-
Vue设置select下拉框的默认选项详解(select空白bug解决)
最近在用vue设置表单数据时发现了一个小问题:用vue动态渲染select下拉框时,select下拉框会出现空白的bug. <template> <div> <select name="art-cate" v-model="select"> <option disabled selected style="display: block;">请选择您的科目</option> <opt
-
antd Select下拉菜单动态添加option里的内容操作
antd Select下拉菜单动态添加option里的内容,通过form表单绑定select选中的值 提供一个公共的方法,每次只需去调用这个方法就行了 //这里是示例数据格式 let giftScope =[ { code:200, id:1, name:"张三" }, { code:300, id:2, name:"李四" }, { code:400, id:3, name:"王五" }, { code:500, id:4, name:&quo
-
bootstrap动态调用select下拉框的实例代码
html代码: <label for="classify" class="col-sm-2 control-label">填报部门:</label> <div class="col-sm-3"> <select class="selectpicker form-control" data-live-search="true" name="addid&quo
-
纯JS实现出生日期[年月日]下拉菜单效果
在制作网页时,可能需要给用户提供注册帐号页面,用户注册 设计很多信息,其中就有 关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用JS实现年.月.日3个下拉框的日期选择.具体代码如下: 1.新建一个js文件,如birthday.js; function DateSelector(selYear, selMonth, selDay) {//定义函数 this.selYear = selYear; this.selMonth = s
-
JavaScript动态操作select下拉框
相信在前端设计中必然不会少的了表单,因为经常会使用到下拉框选项,又或是把数据动态回显到下拉框中.因为之前牵扯到optgroup标签时遇到了问题,没查到太过详细的解决方案,自己动手操作记录一下. 首先就是咱们的老朋友"select"标签,因为需要js.jq两种操作,所以就定义两个select标签. HTML代码: <div style="width: 200px;height: 100px;margin: auto;margin-top: 100px;padding: 2
-
AngularJS service之select下拉菜单效果
本文实例为大家分享了service之select下拉菜单效果的具体代码,供大家参考,具体内容如下 <!-- $watch:持续监听数据上的变化,更新界面 --> <!DOCTYPE html> <html lang="en" ng-app="myApp" ng-controller="myCtrl"> <head> <meta charset="utf-8"> <
-
jQGrid动态填充select下拉框的选项值(动态填充)
本文给大家分享一段代码关于技巧jqgrid动态填充select 下拉框的选项值,非常不多说了,直接给大家贴代码了,具体代码如下所示: function gettypes(){ //动态生成select内容 var str=""; $.ajax({ type:"post", async:false, url:"checkpersontype", success:function(data){ if (data != null) { var json
-
jQuery实现非常实用漂亮的select下拉菜单选择效果
本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果.分享给大家供大家参考,具体如下: 先来看如下运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
-
基于JS快速实现导航下拉菜单动画效果附源码下载
这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 快速的导航下拉菜单动画效果如下所示: 效果演示 源码下载 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav&
随机推荐
- jQuery实现的事件绑定功能基本示例
- java1.5中访问环境变量
- iOS仿微信图片分享界面实现代码
- python 网络爬虫初级实现代码
- 灵活掌握Asp.net MVC中GridView的使用方法
- Python判断变量是否已经定义的方法
- python持久性管理pickle模块详细介绍
- c++中引用和指针的区别和联系
- MySQL使用游标批量处理进行表操作
- WordPress中用于获取文章信息以及分类链接的函数用法
- 对于IE7、FF、OP清除浮动的最优方法第1/2页
- BootStrap入门教程(二)之固定的内置样式
- 利用IIS最大连接数实现网站DOS(图)
- 全面理解java中的异常处理机制
- JS实现留言板功能[楼层效果展示]
- 你真的了解Python的random模块吗?
- linux下安装Nginx1.16.0的教程详解
- vue使用video.js进行视频播放功能
- python/Matplotlib绘制复变函数图像教程
- vue.js中toast用法及使用toast弹框的实例代码