select标签设置默认选中的选项方法


Posted in Javascript onMarch 02, 2018

方法有两种。

第一种 通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果。

< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" selected = "selected" >2</ option >
< option value = "3" >3</ option >
</ select >

第二种 为通过前端js来控制选中的项:

< script type = "text/javascript" >
function change(){
  document.getElementById("sel")[2].selected=true;
}
</ script >
< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" >2</ option >
< option value = "3" >3</ option >
</ select >
< input type = "button" value = "修改" onclick = "change()" />

获取<select>标签选中项文本的js代码为:

var val = document.all.Item.options[document.all.Item.selectedIndex].text
var i=document.getElementById( 'sel' ).options[document.getElementById( 'sel' ).selectedIndex].value;

一些其它操作<select>标签的技巧如下:

1)动态创建select

function createSelect(){
var mySelect = document.createElement( "select" );
mySelect.id = "mySelect" ;
document.body.appendChild(mySelect);
}

2)添加选项option

function addOption(){
//根据id查找对象,
var obj=document.getElementById( 'mySelect' );
//添加一个选项
obj.add( new Option( "文本" , "值" ));
}

3)删除所有选项option

function removeAll(){
var obj=document.getElementById( 'mySelect' );
obj.options.length=0;
}

4)删除一个选项option

function removeOne(){
var obj=document.getElementById( 'mySelect' );
//index,要删除选项的序号,这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}

5)获得选项option的值

var obj=document.getElementById( 'mySelect' );
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;

6)获得选项option的文本

var obj=document.getElementById( 'mySelect' );
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;

7)修改选项option

var obj=document.getElementById( 'mySelect' );
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]= new Option( "新文本" , "新值" );

8)删除select

function removeSelect(){
var mySelect = document.getElementById( "mySelect" );
mySelect.parentNode.removeChild(mySelect);
}

以上这篇select标签设置默认选中的选项方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 名称冲突的解决方法
Apr 08 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
js实现div色块拖动录制
Jan 16 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
原生JavaScript实现todolist功能
Mar 02 #Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 #Javascript
vue判断input输入内容全是空格的方法
Mar 02 #Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 #Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 #Javascript
Vue2.0系列之过滤器的使用
Mar 01 #Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 #Javascript
You might like
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
php内嵌函数用法实例
2015/03/20 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
javascript常用方法汇总
2014/12/02 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
工程力学硕士生的自我评价范文
2013/11/16 职场文书
年度考核自我鉴定
2014/03/19 职场文书
闭幕式主持词
2014/04/02 职场文书
土建施工员岗位职责
2014/07/16 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
办公室主任岗位职责
2015/01/31 职场文书
工程质量保证书
2015/05/09 职场文书
收入证明范本
2015/06/12 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
解析Java中的static关键字
2021/06/14 Java/Android